현재 가장 모던한 모바일 터치슬라이더로 모바일뿐만아니라 일반 웹화면에서도 요긴하게 사용할 만한 플러그인입니다. 다양한 Swipe를 DEMO로 볼 수 있으며 쉽게 적용이 가능합니다. jQuery가 설치되어 있어야 하며 MIT라이선스를 가지고 있습니다.
sds
홈페이지
DEMO
Install
bower로 설치할 경우
bower install swiper
일반 사용법
css와 js를 임포트합니다.
jquery를 사용하지 않는다면 swiper.min.js만 임포트하면되고
jquery를 사용한다면 jquery.js와 swiper.jquery.min.js를 임포트하면 됩니다. 아래의 Markup에는 jquery를 사용하는것으로 작성하였습니다.
Markup
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<!--
<script src="path/to/swiper.min.js"></script>
-->
<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>
기본골격
html내에 슬러이더가 나올 부분의 Markup의 기본골격은 아래와 같습니다.
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<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>
CSS
기본 스와이프될 컨테이너의 사이즈를 잡으시면됩니다.
.swiper-container {
width: 600px;
height: 300px;
}
javascript
body태그내의 하단에 아래와 같이 javascript를 작성하거나 jquery를 사용하신다면 $(document).ready(function(){ ... });내에 작성하셔도 됩니다.
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// And if we need scrollbar
scrollbar: '.swiper-scrollbar',
})
</script>
