Swiper는 슬라이드 구현할 때,
가장 많이 사용하는 js라이브러리이다.
웹 접근성 면에서도 괜찮아서 따로 정리해보려고 한다.
1. 설치 방법
먼저 설치 방법은 공식 사이트에 잘 나와있다.
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을 이용하는 것이다.
자동으로 가장 최신 버전이 적용되기때문에 추천한다.
단, 실제 사이트를 구축할때는 따로 다운로드 받아 연결하는 방식을 추천한다
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</head>
아무튼 요지는 가장 최신버전을 유지하는 것이 좋다.
2. 구조잡기
2.1 HTML
공식 사이트에서도 잘 정리되어있지만 따로 작성해보겠다.
<div class="swiper">
<!-- 슬라이드 영역 -->
<div class="swiper-wrapper">
<!-- 슬라이드 -->
<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>2.2 CSS
.swiper {width: 600px; height: 300px;}
.swiper-wrapper, .swiper-slide 등 기본 구조를 잘 지켰다면,
head영역에 공식 css만 잘 연결되어 있다면,
추가로 css를 작성할 할 필요가 없다.
다만 기본 구조를 감사고 있는 전체 영역에 사이즈만
원하는 만큼 지정해주면 된다.
2.3 JS
기본 js를 작성하기 전에,
Swiper는 Jquery를 기반으로 작성되어있어 JQuery를 연결해줘야한다.
이것 역시 공식사이트를 참조해 파일을 다운 받아 연결하거나
CND를 사용하여 코드를 추가한다.
▼공식사이트
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
▼CDN
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
추가로 여러 CDN을 확인하고 싶다면 아래사이트를 이용해보자
jsDelivr - A free, fast, and reliable CDN for JS and Open Source
Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.
www.jsdelivr.com
서론이 길었다! 기본 js는 아래와 같이 작성한다.
const swiper = new Swiper('.swiper', {
// 기본 설정
spaceBetween: 30, // 슬라이드 사이 여백
slidesPerView: 1, // 보여질 슬라이드 개수
loop: true, // 반복 유무
// 페이지네이션(선택)
pagination: {
el: '.swiper-pagination',
},
// 이동버튼(선택)
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 스크롤(선택)
scrollbar: {
el: '.swiper-scrollbar',
},
});
이외에도 다양한 옵션이 있으며 자주 사용되는 것 위주로 정리했다.
1. 반응형
const swiper = new Swiper('.swiper', {
// 반응형
breakpoints: {
767: { // 화면의 넓이가 767px 이상일 때
slidesPerView: 4,
spaceBetween: 30
},
576: { // 화면의 넓이가 576x 이상일 때
slidesPerView: 3,
spaceBetween: 30
},
320: { // 화면의 넓이가 320px 이상일 때
slidesPerView: 2,
spaceBetween: 20
}
}
});
2. 자동 플레이 설정
const swiper = new Swiper('.swiper', {
// 자동플레이
autoplay: {
delay: 3000, // 3초마다 자동 재생
disableOnInteraction: false // 사용자 상호 작용 후에도 자동재생 유지 유무
},
effect: 'fade', // 슬라이드 넘길 때 효과
});
3. 사용자 스크롤 방지
const swiper = new Swiper('.swiper', {
allowTouchMove: false, // 기본값 true
});
4. 슬라이드 일부 보이기
const swiper = new Swiper('.swiper', {
slidesPerView: 2.2 // 소수점으로 표시할 경우 이후 슬라이드가 일부 보임
});
5. 페이지네이션
const swiper = new Swiper('.swiper', {
pagination {
el: ".swiper-pagination", // 해당 영역이 들어갈 class명
clickalbe : ture // 페이지네이션 클릭가능 유무
}
}
'Javascript' 카테고리의 다른 글
| ClassList 총정리 (className과 비교) (0) | 2024.02.05 |
|---|---|
| 윈도우 창 크기 알아내기 (0) | 2024.02.01 |
| 토글 버튼 구현하기 (+ 'X'자 버튼 만들기) (0) | 2024.01.19 |
| JS로 말 줄임 표시 구현하기(+CSS 구현) (1) | 2024.01.09 |
| 모달 팝업 만들기 (240105 주의 사항 추가) (0) | 2024.01.02 |
