728x90
반응형
제이쿼리 슬라이드 SWIPER는 IE10 이상을 지원하는 반응형 슬라이드 입니다.
사용방법
https://github.com/nolimits4web/swiper/releases
위 깃허브에 접속해서 최신버전 반응형 슬라이드 swiper 를 다운받습니다.
파일을 다운로드하여 압축을 풀고 html에 연결합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="../swiper.min.css">
</head>
<body>
<script src="../swiper.min.js"></script>
</body>
</html>css 파일과 js 파일은 pakage 폴더 안에있으니까 거기서 찾으시면 됩니다.
<div class="swiper-container">
<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 class="swiper-slide">slide 4</div>
</div>
</div>슬라이드 안에 내용은 swiper-slide로 감싸고 그 상위는 swiper-wrapper로 감싸고 제일 위에 swiper-container 로 감싸주세요.
new Swiper('.swiper-container');마지막에 자바스크립트에서 swiper를 초기화 시켜줘야 합니다.
swiper 슬라이드 옵션
네비게이션 버튼과 네비게이션 바, 스크롤바 같은 옵션도 추가할 수 있습니다.
<div class="swiper-container">
<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 class="swiper-slide">slide 4</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>위 처럼 html 코드를 넣고 스크립트에 옵션을 추가해 줘야합니다.
var swiper = new Swiper('.swiper-container', {
navigation: {
prevEl: '.swiper-button-prev', // 이전 페이지 버튼
nextEl: '.swiper-button-next', // 다음 페이지 버튼
},
slidesPerView: 3, // 보여지는 슬라이드 수
spaceBetween: 30, // 슬라이드 간의 거리(px)
loop: true, // 슬라이드 무한 반복
centeredSlides: true, // 다음 슬라이드의 모습의 50%가 보입니다.
pagination: { // 불릿 페이지 네이션
el: '.swiper-pagination',
type: 'bullets',
},
autoplay: { // 자동재생 (1000 = 1초)
delay: 1000,
},
});위 코드들은 swiper의 몇가지 옵션을 정리해 놓은 소스입니다.
한 페이지에 슬라이드 여러가지 쓰는 방법
swiper-containner에 추가로 클래스를 추가해주면 됩니다.
var swiper1 = new Swiper('.class1', {
// 옵션
});
var swiper2 = new Swiper('.class2', {
// 옵션
});
728x90
반응형
'공부 > jQuery' 카테고리의 다른 글
| jQuery 자식 요소 반환 (:not 예제) (0) | 2023.01.08 |
|---|---|
| jQuery 메서드 이벤트 정리 (0) | 2023.01.08 |
| 제이쿼리 슬라이드 (bxSlider) (0) | 2023.01.08 |
| 제이쿼리 슬라이드 배너 (ulslide) (0) | 2021.09.26 |
| 제이쿼리 달력 달기 (datepicker) (0) | 2021.09.26 |
