slidesPerView 로 인한 스와이퍼 작동 오류 질문 채택완료
ZDZ
2년 전
조회 2,546
안녕하세요, 퍼블리싱을 공부하고 있는 학생입니다. 스와이퍼 관련한 오류에 시달리고 있어 질문드립니다..
한 번에 여러개의 슬라이드를 볼 수 있게끔 slidesPerView: 'auto' 를 사용했습니다만 그누보드로 이를 옮겨 확인해보니 스와이퍼가 작동하지 않는 오류를 겪고 있습니다. slidesPerView: 'auto' 를 써야하는 상황이고 값을 지정하게 되면 디자인이 흐트러지는데 해결 방법을 알고싶습니다...
^ 오류가 발생한 상태, autoplay가 작동하지 않고, 마우스로 잡아 옮겨도 이동하지 않는 정지된 상태로 있으며, swiper 좌우 버튼도 보이지 않습니다
^ slidesPerView: 'auto'를 제거한 상태.. 하나의 슬라이드 밖에 안 보이지만 autoplay도 정상 작동하고 좌우버튼도 정상적으로 활성화 되었습니다.
1. 자바스크립트 코드
</p>
<p>var swiper2 = new Swiper(".swiper2", {</p>
<p> loop:true,</p>
<p> slidesPerView: 'auto',</p>
<p> spaceBetween: 36,</p>
<p> autoplay: {</p>
<p> delay: 8000,</p>
<p> disableOnInteraction: false,</p>
<p> },</p>
<p> pagination: {</p>
<p> el: ".menu-pager",</p>
<p> clickable: true,</p>
<p> },</p>
<p> navigation: {</p>
<p> nextEl: ".swiper-button-next",</p>
<p> prevEl: ".swiper-button-prev",</p>
<p> }</p>
<p> });</p>
<p>
2. 스와이퍼 링크 건것
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
답변을 작성하려면 로그인이 필요합니다.
로그인