본문 바로가기
javascript/library

[slide] swiper 사용법(+반응형)

by by-choice 2021. 1. 10.
 

[플러그인/슬라이드] swiper v5부터 ie 미지원!

어제 인터넷 사업하는 친구에게서 연락이 왔다. 친 : 야, 플래시 왜 이래? 나 : 12월 31일에 플래시랑 이별인사 안 했어?ㅎ 했어야지~ 보내줘~ 친 : 슬라이드가 안돼! 나 : 응? 에??? 슬라이드가 플래

fresh-mint.tistory.com

1. css

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

위와 같이 CDN을 가져와도 되고, 다운로드하여 사용해도 된다. 단, 내용 변경은 안되고, 커스텀은 프로젝트.css에서 선택자를 가져와 수정한다. (최신버전의 CDN 혹은 파일다운로드는 공식 사이트: https://swiperjs.com 에서, 이전 버전은 https://cdnjs.com/libraries/Swiper 에서 확인 가능하다)

 

1-1. scss

<link rel="stylesheet" href="https://unpkg.com/swiper@6.4.5/swiper.scss">

2. html / script

<div class="swiper-container 특정-클래스명-추가">
    <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>
    <!-- (★) -->
</div>

html: 구조만이 아니라 클래스명들도 모두 동일하게 들어가야 한다. 슬라이드가 여러개일 시, swiper-container에 특정 클래스명을 추가해 각각의 슬라이드를 제어한다.

// 옵셥 사용하지 않을 경우
// 기본형(default)
// : pager, prev/next button 하나 없이, 아~주~ 깔끔한~ full size의 슬라이드가 구현된다.
const 변수1 = new Swiper('.스와이트-컨테이너-클래스명1')

// 옴션 사용할 경우
const 변수2 = new Swiper('.스와이트-컨테이너-클래스명2', {
    // option 삽입
})

script: 슬라이드가 여러개일시, 변수명이 모두 다르게 들어가야 한다. 동일명으로 들어갈 시, 보다 위에 있는 스크립트는 먹통이 된다.

 

+ pager: (★)에 삽입

<div class="클래스명"></div>
const swiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.클래스명'
  }
})

+ prev/next button: (★)에 삽입

<div class="클래스명A"></div>
<div class="클래스명B"></div>
const swiper = new Swiper('.swiper-container', {
   navigation: {
      nextEl: '.클래스명A', // 다음으로 가기
      prevEl: '.클래스명B' // 이전으로 가기
   }
})

+ scrollbar: (★)에 삽입

<div class="클래스명"></div>
const swiper = new Swiper('.swiper-container', {
   scrollbar: {
      el: '.클래스명'
   }
})

2. 옵션

swiper는 정~말~ 다양한 옵션들이 있는데, 실무 작업시 자주 사용하는 옵션만 정리해보았다.

 

Parameter Type default 기능
speed number 300 슬라이드 속도
spaceBetween number 0 슬라이드 간 여백
slidesPerView number 또는 'auto' 1 한 화면에 들어오는 슬라이드 갯수,
'auto'는 각 슬라이드 넓이에 맞게 자동 설정하는 것으로, loop 함께 사용시 loopedSlides도 활성화 시켜야 함
centeredSlides boolean false 한 화면에 여러개의 슬라이드가 들어오는 경우, 활성화된 슬라이드 가운데 배치
loop boolean false 무한 스와이프
autoplay boolean 또는 object - 자동 슬라이드 설정시, true로 변경하고, 옵션을 추가 하고 싶을 땐, 아래와 같이 오브젝트화 
delay number 3000 자동 슬라이드시, 한 슬라이드에 머무르는 시간
pagination / type "bullets", "fraction", "progressbar" 또는 "custom" bullets bullets: 불렛 형
fraction: '1/3'과 같이 '현재 슬라이드 index/슬라이드 총수'로 표기
progressbar: 프로그레스바 형
watchOverflow boolean false 슬라이드되기 충분하지 않는 슬라이드 수 일경우, 슬라이드 비활성화
단, swiper 버전을 탐

예: 슬라이드가 한 개일 시, 슬라이드 모양(css 적용)은 하고 있으나, 스크립에서 지정한 "모든" 슬라이드 기능은 비활성화됨
breakpoints object - 반응형 슬라이드:
화면 넓이에 따라 레이아웃 변경
단, slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn만 변경 설정 가능(5.3.0 이상부터는 ratio 지원)
mousewheel boolean 또는 object false 마우스휠로 슬라이드 이동
thumbs object - "슬라이드 + 썸네일 슬라이드" 형의 슬라이드 구형 
var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction'
  },
  breakpoints: {
    // 화면의 넓이가 320px 이상일 때
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // 화면의 넓이가 640px 이상일 때
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
});
 

Swiper API

Swiper API Improve this Doc Swiper Full HTML Layout Slide 1 Slide 2 Slide 3 ... Styles Swiper package contains different sets of CSS, Less and SCSS styles: CSS Styles CSS styles for bundle version: swiper-bundle.css - all Swiper styles including all compon

swiperjs.com

3. 통합 샘플

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper | slide</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>/* 임시 삽입: 확인용 */
        .swiper-container{height: 300px;}
    </style>
</head>
<body>
    
    <div class="swiper-container">
        <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>
        <div class="swiper-pagination"></div>

        <div class="swiper-prev"></div>
        <div class="swiper-next"></div>

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

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
                loop: true,
                pagination: {
                    el: '.swiper-pagination'
                },
                navigation: {
                    nextEl: '.swiper-next',
                    prevEl: '.swiper-prev'
                }
            })
    </script>

</body>
</html>
저작자표시 비영리 동일조건

'javascript > library' 카테고리의 다른 글

[slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item  (0) 2021.10.23
[slide] swiper v5부터 ie 미지원!  (0) 2021.01.16
[툴팁] tooltip, 쉽고 쉽게 만들기: tippy.js  (0) 2021.01.12
[slide] slick 사용법(+반응형) How to use slick.js  (2) 2021.01.10

관련글

댓글

티스토리툴바