[jQuery] swiper slider 사용법(반응형), 옵션

안녕하세요. 오늘은 silider 라이브러리인 swiper 슬라이드에 대해 알아보겠습니다.

 

 

1. 공식홈페이지

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

위의 링크는 swiper 공식 사이트로 다양한 데모와 사용법을 확인할 수 있습니다.

 

 

 

2. swiper 사용법

[CDN]

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

css와 js를 불러와줍니다.

 

[HTML 기본 구조]

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!--pagination -->
  <div class="swiper-pagination"></div>

  <!--buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!--scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

 

위의 소스는 html 기본구조로, pagination, button, scrollbar는 필요에 따라 넣어주면 된다.

 

[JS]

    var slide = new Swiper('.swiper', {
        slidesPerView: '1', // 한 슬라이드에 보여줄 갯수
        spaceBetween: 6, // 슬라이드 사이 여백
        loop: false, // 슬라이드 반복 여부
        pagination: true, // pager 여부
        autoplay: { // 자동 슬라이드 설정 
            delay: 3000, // 시간 설정
            disableOnInteraction: false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
        },
        navigation: { // 버튼 사용자 지정
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
         breakpoints: { //반응형
 	  	 // 화면의 넓이가 320px 이상일 때
    	320: {
      	slidesPerView: 2,
      	spaceBetween: 20
   		 },
   		 // 화면의 넓이가 640px 이상일 때
    	640: {
     	 slidesPerView: 4,
     	 spaceBetween: 40
   		 }
  		}
    })