[Jquery] Swiper Slider 이용해서 쉽게 슬라이드 사용하기

1. swiper 라이브러리를 복사해서 head 안에 넣어줍니다.

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

 

2. 슬라이드 할 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>

3. 하단 body 끝나는 윗지점에 script를 넣어줍니다.

 

<script>
    const swiper = new Swiper('.swiper', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,

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

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

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

</script>

4. 결과

3단계로 간단히 만들었구요, 옵션을 사용해서 사용하고 싶은대로 옵션 스크립트를 수정해주면 됩니다.

swiper 옵션정리

slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수

spaceBetween : 6, // 슬라이드 사이 여백

loop : false, // 슬라이드 반복 여부

loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정

pagination : false, // pager 여부

autoplay : {  // 자동 슬라이드 설정 , 비 활성화 시 false

  delay : 3000,   // 시간 설정

  disableOnInteraction : false,  // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음

},

navigation: {   // 버튼 사용자 지정

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부

autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.

a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!

resistance : false, // 슬라이드 터치에 대한 저항 여부 설정

slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동

centeredSlides : true // true시에 슬라이드가 가운데로 배치

allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능

watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정

slidesOffsetBefore : number, // 슬라이드 시작 부분 여백

slidesOffsetAfter : number, // 슬라이드 시작 부분 여백

 

pagination : {   // 페이저 버튼 사용자 설정

  el : '.pagination',  // 페이저 버튼을 담을 태그 설정

  clickable : true,  // 버튼 클릭 여부

  type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 

  renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정

    return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'

  },

  renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용

    return '<span class="' + currentClass + '"></span>' +

           '<span class="' + totalClass + '"></span>';

  }

},

 

반응형에서 breakpoint를 줘서 슬라이드 갯수 설정하는방법

breakpoints : { // 반응형 설정이 가능 width값으로 조정

  768 : {

    slidesPerView : 1,

  },

},

 

//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.

var swiper = new Swiper('.swiper-container', {

  slidesPerView: 1,

  spaceBetween: 10,

  breakpoints: {

    '@0.75': {

      slidesPerView: 2,

      spaceBetween: 20,

    },

    '@1.00': {

      slidesPerView: 3,

      spaceBetween: 40,

    },

    '@1.50': {

      slidesPerView: 4,

      spaceBetween: 50,

    },

  }

});