swiper 질문 입니다. 채택완료
텍스트가 들어가더라도 이런 형태로 나와야 하는데
http://sir.kr/data/editor/2502/32936023_1739410903.8839.png" width="100%" />
제목 텍스트가 들어가니 이렇게 나오는데 음.. 어떤 팁이 있을까요?
http://sir.kr/data/editor/2502/32936023_1739410941.8352.png" width="100%" />
각 슬라이드별 썸네일 사이즈가 달라서 슬라이드 width auto 로 해야 각 썸네일 넓이 만큼 영역을 차지하니까 이렇게 해야 하는데 텍스트가 들어가면 밀어버려서 난감하네요. 해결책이 있을까요?
</p>
<p><style></p>
<p>.swiper-slide { width:auto !important; }</p>
<p></style></p>
<p> </p>
<p>var swiper = new Swiper(".snsSwiper", {</p>
<p> slidesPerView: 'auto', </p>
<p> //freeMode: true,</p>
<p> spaceBetween: 22,</p>
<p> navigation: {</p>
<p> nextEl: ".section_sns .btn-next",</p>
<p> prevEl: ".section_sns .btn-prev",</p>
<p> },</p>
<p> autoplay: {</p>
<p> delay: 4000,</p>
<p> desableOnInteraction: false,</p>
<p> },</p>
<p> loop: true,</p>
<p> speed : 500,</p>
<p> });</p>
<p>
답변 3개
<div class="swiper-slide" style="width:19.7rem"> 이런식으로 ...
각 슬라이드별로 width 값 지정하니 되긴 하네요.. 답변 감사합니다!
![]()
댓글을 작성하려면 로그인이 필요합니다.
아래는 텍스트가 들어가있어서 밀리는데
리스트가 width 로 고정되있으시면 CSS 로 처리하시는게 나을 것 같습니다.
간단하게는 overflow:hidden 처리하시면 되나 아래링크처럼 작업하시는게 더욱 좋습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인