carousel 슬라이드 이미지 (overflow:hidden 적용)

[오승용]

carousel slide image 만들고 있는데 

슬라이드의 가장 부모의 width에 100vw과  overflow:hidden을 주고

그 자식에게 width에 300vw를 주었는데 스크롤바가 생기는 이유가 궁금합니다. ㅎㅎ

HTML

<selector class='slider'>  (-->  overide: hidden 과 width:100vw 과 position:relative )
    <div class='slider__box'> (--> display:flex; transform: translateX(0); width:300vw)
      <div class='slider__img'><img src="./src/ma1.jpg" alt=""></div>
      <div class='slider__img'><img src="./src/ma2.jpg" alt=""></div>
      <div class='slider__img'><img src="./src/ma3.jpg" alt=""></div>
      <button class="slider__btn"></button>
      <button class="slider__btn"></button>
    </div>

 

CSS

.slider {
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.slider .slider__box {
  display: flex;
  transform: translateX(0);
  width: 300vw;
}

.slider .slider__box .slider__img {
  width: 100vw;
  height: 300px;
}
.slider .slider__box .slider__img img {
  width: 100%;
  height: 100%;
}

  </selector>

 

 

[codingapple]

똑같이 복붙해보니까 이미지 3개 전부 볼 수 있는 스크롤바는 안생기던데얌 

이미지가 쪼금 커서 생기는 스크롤바는 있던데  

그것은 마진이나 그런걸 조정하면 될듯요 

[글쓴이]

글