HTML에 필요한 기본 구조
<!-- 슬라이드 메인 컨테이너 -->
<div class="swiper">
<!-- 추가 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 class="swiper-pagination"></div>
<!-- 이전 이후 버튼 필요하면 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 스크롤 바 필요하면 -->
<div class="swiper-scrollbar"></div>
</div>
* swiper-button-prev, swiper-button-next 버튼은 swiper 태그 안에 있으면 swiper 의 가로 너비를 벗어나면 출력이 안됨. 그래서 swiper 태그 바깥쪽에 선언해서 사용했음!
JS 코드
new Swiper('선택자', {
// direction: 'horizontal'; 기본값이므로 생략 가능. 수직은 vertical 값 주기
slidesPerView: 3, // 한번에 보여줄 슬라이드 개수
spaceBetween: 10, // 슬라이드 사이 여백
centeredSlides: true, // 1번 슬라이드가 가운데 보이기 여부
loop: true, // 반복재생 여부(마지막 슬라이드 후 기능 멈춤 여부)
autoplay: { // 자동재생 여부
delay: 5000 // 시간 텀
},
pagination: {
el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
clickable: true // 사용자의 페이지 번호 요소 제어 가능 여부
},
navigation: {
prevEl: '.promotion .swiper-button-prev', // 이전 버튼
nextEl: '.promotion .swiper-button-next' // 이후 버튼
}
});
swiper 선택자에 width와 height 값 줘야 하는데 이 때 아래 사진처럼 calc로 계산해서 넣어주면 편함!
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [좌석 만들기] (0) | 2022.05.25 |
---|---|
JS - [ 오늘부터 14일간 날짜 출력 ] (0) | 2022.05.24 |
JQuery - [ DB정보 JSON 형태로 변경 ] (0) | 2022.05.02 |
JQuery - [ Ajax RSS ] (0) | 2022.05.01 |
JQuery - [ XML / JSON + AJAX ] (0) | 2022.04.30 |