swiper 사용법

메인 배너 등에서 자주 사용되는 좌우 스와이프 플러그인입니다.

 

제일 먼저 할 일은 스와이퍼 슬라이드 홈페이지에서 css, js파일을 다운로드하는 것입니다.

 

1. 사이트 접속해서 다운로드하기 https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

다운로드 페이지를 보면 alpha 파일이 있는데 alpha파일이 아닌 걸로 다운로드하면 됩니다.

 

2. 코드 작업란에 파일, 또는 링크 불러오면 됩니다.

<link rel="stylesheet" href="파일경로/swiper.css">
<script src="파일경로/swiper.min.js"></script>

 

3. html 구조 유지하면서 작업하기

스와이퍼 홈페이지에 있는 구조입니다.

이 구조와 클래스명은 건들지 않고 그대로 두고 사용합니다.

필요한 스타일이 있다면 클래스명 추가를 해서 수정합니다.

<!-- Slider main container -->
<div class="swiper-container">
    <!-- 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>

 

4. js 코딩하기

$(function(){
    //ready 안에 작성해줍니다.
    var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters 
        direction: 'vertical', // 방향
        slidesPerView: auto, // 슬라이드를 한번에 보여줄 갯수를 자동으로 설정
        slidesPerGroup : 3, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
        spaceBetween: 10, // 슬라이드간 padding 값 10px 씩 떨어뜨려줌
        
        // 그룹수가 맞지 않을 경우 빈칸으로 메우기
        // 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
        loopFillGroupWithBlank : true,

        loop: false, // loop 를 true 로 할경우 무한반복 슬라이드, 
        //false 로 할경우 슬라이드의 끝에서 더보여지지 않는다

        //pagination 필요할 경우
        pagination: {
            el: '.swiper-pagination',
            clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동한다
            type: 'progressbar', //  scrollbar 진행바가 필요할 경우 추가한다
        },
        
        // Navigation arrows 
        navigation: {
            nextEl: '.swiper-button-next', //이런 버튼은 css파일 필수입니다.
            prevEl: '.swiper-button-prev',
        },
        observer: true,	
        // 스타일을 변경하거나(예: 숨기기/표시)
        //하위 요소를 수정(슬라이드 추가/제거)할 때마다 스위퍼가 업데이트(초기화)된다
  		observeParents: true,
        
        // 반응형
        breakpoints: {
            1280: {
                slidesPerView: 3,
                slidesPerGroup: 3,
            },
            720: {
                slidesPerView: 1,
                slidesPerGroup: 1,
            },
        }
    })
});