Swiper JS 사용법 총정리 이걸로 끝 사용방법

by 구스만 2020. 7. 6. 23:22

https://swiperjs.com/ <- swiper js 공식 사이트 들어가보면 MIT license 라고 적혀있는데

사용하는데 전혀 문제없는 라이센스다

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

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

swiper js cdn 코드다 css 랑 js 만 include 하면 된다

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

swiper js 기본 레이아웃

swiper-container 로 감싸주고 그안에 swiper-wrapper 넣어주고 swiper-slide가 슬라이드 박스 한개라고 보면된다

swiper js

이렇게 html 을 세팅하고

<script type="text/javascript">

var mySwiper = new Swiper('.swiper-container', {
	slidesPerView: 3, //슬라이드를 한번에 3개를 보여준다
    spaceBetween: 30, //슬라이드간 padding 값 30px 씩 떨어뜨려줌
	loop: true, //loop 를 true 로 할경우 무한반복 슬라이드 false 로 할경우 슬라이드의 끝에서 더보여지지 않음
});

</script>

이렇게 자바스크립트 코드를 세팅해주면 슬라이드가 나옴

그 외 추가적으로 이런 디자인의 슬라이드 없나? 할때는

https://swiperjs.com/demos/

Swiper Demos

swiperjs.com

위 사이트에서 여러가지 슬라이드 예시를 보여주고 있는데 source code 버튼을 누르면 페이지가 git 으로 이동하는데

하단으로 내리다보면 script 코드부분을 내가 올린 코드와 비교해서 복사 붙여넣기 하면된다

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.