[JS] Swiper.js 이미지 슬라이드 스크립트 사용법 (+반응형)

1. Get Started! Swiper.js 프로젝트에 다운로드하기

swiper.js를 프로젝트에 받는 방법은 여러 가지가 있습니다. 각자 프로젝트 언어나 방식에 맞게 받아주면 됩니다.

NPM으로 받는 방법

$ npm install swiper

인스톨은 간단합니다.

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

인스톨 후 기본 import 코드입니다.

 

프로젝트에 필요한 컴포넌트들만 골라서 import 해올 수도 있습니다. 저는 전체를 받아서 쓰는 게 마음이 편해서 따로 받진 않습니다.

필요하신 분들은 Swiper.js Get Started 페이지에서 확인할 수 있습니다.

CDN 주소로 파일 불러오기

그냥 내 프로젝트에 아래 cdn 주소를 그대로 붙여 넣으면 간단하게 추가할 수 있습니다.

<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>

css도 필수로 불러와야 합니다.

파일 직접 다운로드하기

파일을 프로젝트에 직접 추가해서 진행해야 하는 경우 다운로드할 수 있는 링크입니다.

https://www.jsdelivr.com/package/npm/swiper

jsDelivr - A free, fast, and reliable CDN for Open Source

---

2. 기본 슬라이드 만들기

<!-- 슬라이드 전체 감싸는 컨테이너 -->
<div class="swiper mySwiper">
  <!-- wrapper 추가 필수 -->
  <div class="swiper-wrapper">
    <!-- 실제 이미지나 컨텐츠가 들어갈 slide들 -->
    <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>

  <!-- navigation buttons 필요할 경우 추가 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script>
  var swiper = new Swiper(".mySwiper", {
    // 옵션 시작 부분
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
    },
    // 옵션 끝 부분
  });
</script>

기본 슬라이드 구조입니다.

Swiper는 마우스 드래그나 터치로 좌우 슬라이드를 넘길 수 있기 때문에

navigation과 pagination 이 필요 없으면 옵션 부분은 지우고 실행시키면 됩니다.

하지만 pagination은 사용자가 보기에 있는 게 좋습니다.

 

예제)

 

---

3. 슬라이드 스크립트로 스크롤 바 만들기

클라이언트는 보통 브라우저 기본 스크롤바 디자인을 좋아하지 않습니다.

그래서 꼭 바꾸고 싶어 하는 클라이언트를 만난다면, 스크롤바 디자인을 수정할 수 있게 해주는 스크립트를 추가해서 만들어 주는 경우가 종종 있습니다. 하지만 그 프로젝트에서 Swiper js를 사용하고 있다면 따로 스크롤바 스크립트를 추가할 필요가 없습니다.

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <h4>Scroll Container</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus,
        ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet
        dolor lectus eu libero. Vestibulum venenatis eget turpis sed
        faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam
        elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean
        tristique nisl tellus, sit amet fringilla nisl volutpat cursus.
        Quisque dignissim lectus ac nunc consectetur mattis. Proin vel
        hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et
        tincidunt tristique, nisl risus facilisis lectus, ut interdum orci
        nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit
        sodales posuere eget non est. Fusce convallis vestibulum dolor non
        volutpat. Vivamus vestibulum quam ut ultricies pretium.
      </p>
      <p>
        Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna
        consectetur convallis non vel mi. Donec libero dolor, volutpat ut
        urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel
        scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis
        ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque
        iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus,
        sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare
        nunc vel tellus facilisis, quis dictum elit tincidunt. Donec
        accumsan nisi at laoreet sodales. Cras at ullamcorper massa.
        Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.
      </p>
      ...
    </div>
  </div>
  <div class="swiper-scrollbar"></div>
</div>
    
<script>
  var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    slidesPerView: "auto",
    freeMode: true,
    scrollbar: {
      el: ".swiper-scrollbar",
    },
    mousewheel: true,
  });
</script>

html 구조와 필요한 script 옵션입니다.

예제)

데스크톱에서 mousewheel 도 잘 되고 모바일 기기에서 터치도 잘 됩니다.

mousewheel

---

4. 반응형 슬라이드 적용하기

Swiper는 반응형 웹에도 적용할 수 있도록 지원합니다.

mobile first로 적용되고, breakpoints 기준을 px이나 비율로 설정 가능합니다.

그리고 기본은 window 넓이로 반응하지만 내가 지정한 container 엘리먼트 기준으로도 적용할 수 있습니다. (breakpointsBase 파라미터)

<div class="swiper mySwiper">
  <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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<script>
  var swiper = new Swiper(".mySwiper", {
  	// 기본 옵션(parameters)
    // window 넓이 640px 보다 작을때
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 반응형 breakpoints : px 기준
    breakpoints: {
      // window 넓이 640px ~ 767px
      640: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      // window 넓이 768px ~ 1023px
      768: {
        slidesPerView: 4,
        spaceBetween: 40,
      },
      // window 넓이 1024px ~
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    },
    
	// using "ratio" endpoints : 화면 비율 기준
    breakpoints: {
        '@0.75': {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        '@1.00': {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        '@1.50': {
          slidesPerView: 4,
          spaceBetween: 50,
        },
    }
    
    // breakpoints 기준을 변경할 수 있는 옵션
    breakpointsBase: 'window'
  });
</script>

예제)

---

5. 그 외 자주 쓰는 옵션(Parameter) 정리

Parameters	Type	Default	Description
initialSlide	number	0	0번이 첫번째 슬라이드. 그 외 숫자로 설정시 해당 슬라이드가 제일 먼저 보입니다.
loop	boolean	false	true 로 설정시 슬라이드가 계속 반복됩니다.
slidesPerGroup	number	1	설정한 숫자의 개수대로 그룹으로 묶여 슬라이드가 넘어갑니다.
slidesPerView	number | 'auto'	1	슬라이드가 몇개 보이게 할지 설정합니다.
spaceBetween	number	0	슬라이드 사이에 간격을 줄 수 있습니다. 1 = 1px
speed	number	300	슬라이드가 넘어가는 속도
autoplay	boolean | AutoplayOptions	Description 참고	슬라이드가 자동으로 넘어가도록 설정 { delay: number(3000), disableOnInteraction: boolean(true), pauseOnMouseEnter: boolean(false), ... } delay : 다음 슬라이드가 넘어가기 전까지의 시간 disableOnInteraction: 사용자가 슬라이드와 상호작용 하고 난 후, autoplay를 다시 시작할지 여부 pauseOnMouseEnter: 슬라이드에 마우스 오버시 autoplay 일시정지 여부
effect	'slide' | 'fade' | ..	'slide'	슬라이드가 넘어가는 효과
centeredSlides	boolean	false	index 슬라이드가 가운데 보이도록 설정