swiper는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 매우 편하다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어나다.
제일 먼저 라이브러리를 사용하기 위해 cdn연결(파일 다운로드도 가능)
//CSS 불러오기<!-- 내 소스보다 우선 적용 되어야하기 때문에 내 소스보다 위에 작성 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
//JS 불러오기
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
사용법은 매우 간단한데 각 태그에 class를 맞게 주고 옵션을 설정해주면 된다.
💡주의 할 점은 swiper 사용시 필수로 아래 구조와 같이 클래스 명을 지정해줘야 한다
swiper > swiper-wrapper > swiper-slide
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide"></li>
<li class="swiper-slide"></li>
<li class="swiper-slide"></li>
</ul>
</div>
const slide = new Swiper('#my-swiper', {
slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
spaceBetween : 5, // 슬라이드 사이 여백
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false
delay : 3000, // 시간 설정
},
pagination : false, // pager 여부
navigation: { // 버튼 사용자 지정
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
- freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
- autoHeight : true, // 현재 활성 슬라이드 높이 맞게 높이 조정
- resistance : false, // 슬라이드 터치 저항 여부
- slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
- allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능
- watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
- slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
- slidesOffsetAfter : number, // 슬라이드 마지막 부분 여백