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

2023.05.14 12:21:11 조회 2467 (58.♡.♡.110)

본문

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

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

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

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

1. 자바스크립트 코드


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. 스와이퍼 링크 건것