SwiperJS💡

지독하게 라이브러리, 프레임워크의 사용을 피해오며 수작업으로 로직을 짜던 내가
이제 협업, 과제 등으로 드디어 이런저런 세상의 이로운 기능들을 가져다 쓰기 시작했다...

그 중 swiper의 적용을 해보는 중에 생긴 이슈에 대한 해결법을 풀어본다
결론부터 말하자면... 빠르게 버전업데이트를 진행하는 swiper의 최신 문법을 적용하지 못한 이유였었다!

🧡Issue

  import Swiper from 'swiper';
  import 'swiper/swiper-bundle.min.css';
  import 'swiper/swiper.min.css';
  import 'swiper/modules/navigation/navigation-element.min.css';
  import 'swiper/modules/pagination/pagination-element.min.css';

  new Swiper(newItemSliderEl, {
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    slidesPerView : 4,
    spaceBetween: 35,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el : '.swiper-pagination',
    },
  });

위와같이 스와이퍼를 적용한 슬라이더를 만들었었는데, 양 옆의 페이지 넘기기 버튼 (화살표)를 아무리 눌러도 슬라이더가 동작하지 않았다.

마우스 드래그로는 슬라이딩이 가능했지만 Navigation, Pagination, Autoplay 등 마우스 드래그를 제외한 모든 슬라이딩이 동작하지 않았고, 한참을 구글링을 해도 내 코드가 뭐가 잘못됐는데?? 환경설정문제인가?? 하며 답답했었다 🤯

🧡해결

문제는 버전이였다! swiper는 아주 빠르게 많은 버전을 내어놓고 있는데, 구글링에서 나온 문법들은 거의 구버전의 문법이였던 것...

최신 문법에서 지정된 몇 옵션들은 해당 모듈을 import해와야만 작동을 하는 것이였다!

  // swiper외에 사용할 기능들을 함께 불러온다
  import Swiper, {Navigation, Pagination, Autoplay} from 'swiper';
  import 'swiper/swiper-bundle.min.css';
  import 'swiper/swiper.min.css';
  import 'swiper/modules/navigation/navigation-element.min.css';
  import 'swiper/modules/pagination/pagination-element.min.css';

  new Swiper(newItemSliderEl, {
    //modules에 사용 할 옵션들을 지정한다
    modules: [Navigation, Pagination, Autoplay],
    autoplay: {
      delay: 3500,
      disableOnInteraction: false,
    },
    slidesPerView : 4,
    spaceBetween: 35,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el : '.swiper-pagination',
    },
  });

마치며🙌

앞으로 구글링을 할 때엔 포스팅 된 날짜와 해당 기능의 버전을 꼭..함께 확인해야겠다🤧