[swiperjs] 스와이퍼 슬라이드 갯수가 1개일때만 loop, autoplay 안하게 변경하기, 드래그 방지

스와이퍼 슬라이드 갯수가 1개일때만 loop, autoplay 안하게 변경하기

swiiper-slide 갯수가 1개일때 옵션과 아닐때 옵션을 다르게 주고
하단에서 new Swiper로 생성하면 된다.

 

근데! 이렇게 드래그하면 좌우로 움직이게 돼 빈여백 보이는 문제가 있음!!
👉 이럴때는 touchRatio: 0, 옵션을 더 추가해주면 해결완료!

  var options = {};

  if ($(".main-visual .swiper-slide").length == 1) {
    options = {
        slidesPerView: 1,
        navigation: {
          nextEl: ".btn-next",
          prevEl: ".btn-prev",
        },
      touchRatio: 0,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        }
    };
  } else {
    options = {
      slidesPerView: 1,
      loop: true,
      autoplay: true,
      navigation: {
        nextEl: ".btn-next",
        prevEl: ".btn-prev",
      },
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
    };
  }

 var mainVisual = new Swiper(".main-visual", options);