[JAVASCRIPT] Swiper 사용법 - 웹 슬라이드 구현

1. Swiper 설치

 

Swiper 설치법은 여러가지가 존재합니다.

-CDN을 기입하는 방식

-swiper.css,swiper.js 를 다운받아 직접 삽입하는 방식

-npm으로 설치하는 방식

 

프로젝트 상황에 맞게 위의 방법에 따라 사용하시면 됩니다.

 

2. Swiper 마크업 구조 및 스크립트

 

특별한 커스터마이징을 하지 않는다면 Swiper의 구조는 매우 간단하게 이루어져있습니다.

 

기본적으로 swiper-container > swiper-wrapper > swiper-slide 구조로 이루어져있으며, 해당 클래스명으로 지정해주면 swiper.css에 저장되어있는 방식에 따라 슬라이드에 알맞는 레이아웃으로 자동 적용됩니다.

 

//Swiper 마크업 구조

<div class="swiper-container" id="testSwiper">
    <div class="swiper-wrapper">
    	<div class="swiper-slide">슬라이드 컨텐츠1</div>
        <div class="swiper-slide">슬라이드 컨텐츠2</div>
        <div class="swiper-slide">슬라이드 컨텐츠3</div>
        <div class="swiper-slide">슬라이드 컨텐츠4</div>
        <div class="swiper-slide">슬라이드 컨텐츠5</div>
    </div>
</div>

 

위의 마크업 구조를 작성하신 후 아래의 스크립트를 작성하면 swiper의 기본 슬라이드가 만들어집니다.

//스크립트 

const testSwiper = new Swiper('#testSwiper',{
	slidesPerView: 1,
    //이 블록 안에서는 swiper 가 지원하는 많은 옵션이 들어가게됩니다.
});

 

3.Swiper 가장 기본이 되는 옵션

 

Swiper를 사용할때 가장 보편적으로 많이 사용하는 옵션입니다.

한 화면에 보여지는 슬라이드 갯수, 슬라이간의 여백, 반복, 자동진행 여부 등을 지정합니다.

 

//스크립트 

const testSwiper = new Swiper('#testSwiper',{
	slidesPerView: 'auto', //한 슬라이드에 보여지는 갯수
    spaceBetween: 10, // 슬라이드 컨텐츠 간의 여백
    loop: true, //슬라이드 반복 여부
    loopAdditionalSlides:1, // loop가 true 일때 마지막 슬라이드컨텐츠에서 다음 슬라이드 컨텐츠가 안보이는 현상을 막아주는 옵션
    autoplay: { // 슬라이드 자동진행 여부 설정
    	delay: 2000 // 자동진행이 진행되는 시간 설정
        disableOnInteraction: false, // autoplay사용시 필수적으로 들어가야하는 옵션,값. autoplay의 비활성화를 막아줌
    },
    pagination: false // 슬라이드 pager사용 여부
    navigtion: { //swiper 버튼 활성화 여부
    	nextEl: ".swiper-button-next", // next버튼의 클래스명
        prevEl: ".swiper-button-prev" //prev버튼의 클래스명
    },
});

 

 

4. Swiper 반응형 처리

 

Swiper는 breakpoints라는 객체로 각 디바이스 해상도에 따라 반응형 설정이 가능합니다.

 

const testSwiper = new Swiper('#testSwiper',{
	slidesPerView: 5,
    
    breakpoints: {
    	750: { //가로해상도가 750px이하일때 동작
        	slidesPerView: 3,
        },
        420: { //가로해상도가 420px이하일때 동작
        	slidesPervView: 2, 
        },
        360: { //가로해상도가 360px이하일때 동작
        	slidesPerView: 1,
        }
    },
});

 

 

5.Swiper 사용가능한 메소드

 

Swiper변수명에 메소드()를 붙여주면 사용이 가능합니다.

 

const testSwiper = new Swiper('#testSwiper',{
	slidesPerView: 1,
});

//슬라이드 삭제 
testSwiper.destroy();

//자동 재생 시작
testSwiper.autoplay.start();

//자동 재생 정지
testSwiper.autoplay.stop();

//해당 슬라이드 컨텐츠로 이동
testSwiper.slideTo(index, speed, runCallBacks);

//직전 슬라이드 컨텐츠로 이동
testSwiper.slidePrev(index, speed, runCallBacks);

//다음 슬라이드 컨텐츠로 이동
testSwiper.slideNext(index, speed, runCallBacks);

 

 

6.Swiper 이외의 속성이나 사용법

 

여기까지 가장 기본적은 swiper의 사용방법이였습니다.

swiper의 사용방법은 무궁무진하게 많고 어떤 이벤트를 사용하냐,어떤 타이밍에 사용하냐에 따라 동적으로 사용할수있고 css를 어떻게 작성하냐에 따라 다양한 방식으로 커스터마이징도 가능합니다.

 

추가적인 속성이나 사용법은 swiper api 및 swiper 개발자 GitHub에 매우 잘 나와있기때문에 아래의 링크를

참고 하시길 바랍니다.

Swiper API

 

GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions