swiper 라이브러리

회사에서 급하게 슬라이드 사용할 때

자주 사용하는 라이브러리 swiper

 

필요한 건 jquery / swiper css / swiper js 이 세가지 CDN이 필요함

 

https://swiperjs.com/get-started

Getting Started With Swiper

여기서 CSS와 JS CDN을 긁어온다

//CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

//JS
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

 

그리고 HTML안에 기본 틀을 넣고

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

나는 보통 pagination 이나 button, scrollbar 없이 dragable이 되도록 설정해서 사용함

마크업 작성했으면

swiper 스크립트를 작성해준다.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  observer : true,
  observeParents: true,
  loop: true,
  centeredSlides: true,
  /*slidesPerView: 5.5,
  spaceBetween: 10,
  freeMode: true,*/
  autoplay: {
	delay: 3500,
	disableOnInteraction: false,
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

이렇게 세팅해주고 필요한 조건에 따라 수정해주면

완전 초간단하게 PC에서도 모바일에서도 드래그 가능한 슬라이드 완성임

여기에 기록해두고 귀찮을때마다 들어와서 긁어다가 사용해야지 !