slidesPerView 로 인한 스와이퍼 작동 오류 질문

ZDZ

2년 전 2,922

안녕하세요, 퍼블리싱을 공부하고 있는 학생입니다. 스와이퍼 관련한 오류에 시달리고 있어 질문드립니다..

한 번에 여러개의 슬라이드를 볼 수 있게끔 slidesPerView: 'auto' 를 사용했습니다만 그누보드로 이를 옮겨 확인해보니 스와이퍼가 작동하지 않는 오류를 겪고 있습니다. slidesPerView: 'auto' 를 써야하는 상황이고 값을 지정하게 되면 디자인이 흐트러지는데 해결 방법을 알고싶습니다...

978217582_1684033685.7073.png

^ 오류가 발생한 상태, autoplay가 작동하지 않고, 마우스로 잡아 옮겨도 이동하지 않는 정지된 상태로 있으며, swiper 좌우 버튼도 보이지 않습니다

978217582_1684033749.0289.png

^ slidesPerView: 'auto'를 제거한 상태.. 하나의 슬라이드 밖에 안 보이지만 autoplay도 정상 작동하고 좌우버튼도 정상적으로 활성화 되었습니다.

1. 자바스크립트 코드

Copy

var swiper2 = new Swiper(".swiper2", {

      loop:true,

      slidesPerView: 'auto',

      spaceBetween: 36,

      autoplay: {

        delay: 8000,

        disableOnInteraction: false,

      },

      pagination: {

        el: ".menu-pager",

        clickable: true,

      },

      navigation: {

        nextEl: ".swiper-button-next",

        prevEl: ".swiper-button-prev",

      }

 });

2. 스와이퍼 링크 건것

그누보드5