swiper slider JS Plugin

swiper란?

무료로 사용할 수 있는 자바스크립트 슬라이드 플러그인입니다.

모바일도 지원하며 실제 웹 서비스를 운영하는 많은 사이트에서 사용하는 플러그인입니다.

(DBcut에 올라오는 90% 이상의 국내 웹 사이트가 swiper plugin을 사용합니다.)

 

https://swiperjs.com/get-started

Getting Started With Swiper

 

 

1. head태그 내에 swiper css, swiper js를 연결합니다.

▼ cdn url 활용

https://cdnjs.com/libraries?q=swiper 

Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

▼ 위 다운 받은 js 파일 상대경로 활용 2022 하반기 기준 8.3.2 최신버전

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>

 

2. body 영역에 다음과 같이 태그를 작성합니다.

<div class="swiper-container">
		<!--필수-->
        <div class="swiper-wrapper">
            <div class="swiper-slide slide1">slide1</div>
            <div class="swiper-slide slide2">slide2</div>
            <div class="swiper-slide slide3">slide3</div>
        </div>
        <!--필요 시 사용(선택)-->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
</div>

 

3. 다음과 같이 script를 작성합니다.

var mySwiper = new Swiper('.swiper-container', { 
    //필요한 옵션을 작성합니다.
    //옵션 문법
    //옵션:값, 옵션:값
})

 

 

---

 

Swiper horizontal 

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

swiper-fade

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

swiper-slidesPerView

See the Pen Untitled by yuna122212 (@yuna122212) on CodePen.

 

 

 

swiper-responsive

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1, //640~1024 해상도 외 레이아웃 뷰 개수
      spaceBetween: 10, //위 slidesPerview 여백
      breakpoints: { //반응형 조건 속성
        640: { //640 이상일 경우
          slidesPerView: 2, //레이아웃 2열
        },
        768: {
          slidesPerView: 3,
        },
        1024: {
          slidesPerView: 4,
        },
      }
});

See the Pen Swiper-responsive by yuna122212 (@yuna122212) on CodePen.

 

 

swiper-prev, swiper-next

See the Pen Swiper-prev, next by yuna122212 (@yuna122212) on CodePen.

 

 

 

swiper-pagination

See the Pen Swiper-pagination by yuna122212 (@yuna122212) on CodePen.

 

 

 

---

 

swiper option

//슬라이드 효과
direction: 'vertical',
direction: 'horizontal',
effect:'fade',

//슬라이드 개수
slidesPerView:2,

//슬라이드 간격
spaceBetween:30,

//반복
loop: true,

//자동재생
autoplay:{
	delay:1000,
    disableOnInteraction:false,
},

//페이지 인디케이터
pagination: {
	el: '.swiper-pagination',
	//type:'bullets'(기본)
	//type:'fraction' (숫자)
	//type:'progressbar' (바)
	type:'bullets',
},

//페이지 이전/다음 버튼
navigation: {
	nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev',
},

//스크롤바 표시
scrollbar: {
	el: '.swiper-scrollbar',
},

//마우스 휠 가능
mousewheel:{
	invert:true,  
},

 

---

 

5. swiper를 일시정지/재생하고 싶을 경우에는 다음과 같이 HTML과 script를 작성합니다.

<div class="swiper-pause">일시정지</div>
<div class="swiper-play">재생</div>

swiper 함수가 종료된 다음 위치에 작성합니다.

$('.swiper-pause').click(function(){
	mySwiper.autoplay.stop();
})
$('.swiper-play').click(function(){
	mySwiper.autoplay.start();
})