💡깨달음💡/라이브러리+플러그인+API
Swiper(1) 기본 사용 및 옵션 정리
과부하가즈아
2024. 5. 2. 16:49
슬라이드를 구현할 수 있는 플러그인
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
CDN으로 연결하기(min: 압축파일)
<!-- Swiper css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper js -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script><!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>swiper의 기본 구조는
제일 상단에 .swiper 중간단에 .swiper-wrapper 마지막 슬라이드 하나하나가 .swiper-slide라는 class명을 가지고 있다.
그 외 사용하는 것으로는
페이지네이션을 위한 .swiper-pagination
슬라이드의 이동을 위한 네비게이션은 .swiper-button-prev과 . swiper-button-next
스크롤바는 .swiper-scrollbar의 class명을 사용해준다.
해당 class명을 사용해주면 swiper의 기본옵션 및 css가 적용되어진다.
📌기본적용📌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<title>Document</title>
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper">
<!-- 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>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
const swiper = new Swiper(".swiper", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
},
});
</script>
</body>
</html>
옵션
swiper을 위한 다양한 옵션이 존재한다.
슬라이드 관련 옵션
// direction(슬라이드 방향)
direction: 'horizontal' // 기본_수평 슬라이드
direction: 'vertical' // 수직 슬라이드// slidesPerView(한 슬라이드에 보여줄 갯수)
slidesPerView: 1 // 기본
slidesPerView: 'auto' // 슬라이드의 넓이나 높이에 따라 자동계산
// spaceBetween(슬라이드 사이 여백)
spaceBetween: 0 // 기본
// centeredSlides(슬라이드를 중앙으로 배치)_첫 슬라이드가 중앙으로 배치된다.
centeredSlides: true // 기본_센터모드// loop(슬라이드 루프 설정)
loop: true // 기본_무한루프
loop: false // 루프 설정 X
loop: true로 지정할 경우 마지막 슬라이드에서 처음슬라이드로 이동은 하지만 화면상으로는 다음슬라이드가 없는거 처럼 보이다가 누르면 막상 첫슬라이드로 이동한다(부자연스러움) 이때 loopAdditionalSlides을 추가해줌으로써 자연스럽게 슬라이드가 뒤에도 계속 있는거처럼 끊기지 않게 보이게 된다.
// loopedSlides(loop시 종료/시작전에 슬라이드 수를 정의)
slidePerview: 1 // 기본
// loopAdditionalSlides(슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정)
loopAdditionalSlides: 1// autoplay(자동재생여부)
// false(자동재생끔_기본), true(자동재생켬), delay(자동재생딜레이시간ms
autoplay: false // 기본
autoplay: true
autoplay: {
delay: 3000,
},// speed(슬라이드 애니메이션 속도_ms)
speed: 300 // 기본// effect(슬라이드 애니메이션 효과)
effect: slide // 기본
effect: fade
effect: cube
effect: coverflow
effect: flippagination 옵션
// pagination(페이징 설정 여부)
// false(끔_기본), true(켬), type(종류_bullets, fraction, progressbar, custom)
pagination: {
el: ".swiper-pagination",
clickable: true, // 클릭시 slide 이동 여부
type: "bullets",
},navigation 옵션
// navigation(이전/다음 버튼 설정 여부)
// false(끔_기본), true(켬), nextEl, prevEl
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},scrollbar 옵션
// scrollbar(스크롤바 설정 여부)
// false(끔_기본), true(켬), hide(숨김)
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
🔗참고🔗