swiper 사용법

여기서 찾아보고 없으면 서치 ㄱㄱ

링크

css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

js

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

js 작동법

const 변수명 = new Swiper(".swiper클래스명", {
spaceBetween: 30, // 슬라이드 사이 여백
slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
centeredSlides: true, //센터모드
autoplay: { //자동슬라이드 (false-비활성화)
delay: 2500, // 시간 설정
disableOnInteraction: false, // false-스와이프 후 자동 재생
},
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
pagination: { // 호출(pager) 여부
el: ".swiper-pagination", //버튼을 담을 태그 설정
clickable: true, // 버튼 클릭 여부
},
navigation: { // 버튼
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});

html 구조

.swiper > swiper-wrapper > swiper-slide
순으로 작업
pagination은 클래스명으로 커스텀이 가능

주의사항

컴마(,)찍었는지 꼭꼭꼮!! 확인
new Swiper(".swiper클래스명" 클래스명은 꼭 swiper 최상단 클래스로 적용할것!

~~ 출처 ~~
https://swiperjs.com/
https://shadesign.tistory.com/entry/swiper-slide-%EC%B4%9D%EC%A0%95%EB%A6%AC%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%81%EC%9A%A9-%EC%98%B5%EC%85%98