반응형
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다.
모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다.
MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다.
홈페이지
DEMO
Install
아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다.
- bower로 설치할 경우
$ bower install swiper- 또는 Atmosphere as Meteor 패키지로 설치할 경우
$ meteor add nolimits4web:swiper- 또는 NPM으로 설치할 경우
$ npm install swiper- 또는 CDN으로 사용할 경우
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>CDN으로 적용하는 예제
CDN으로 적용하는 예제는 아래와 같습니다.
아래와 같이 js와 css에 대하여 swiper나 swiper.min 중 하나만 적용하면 됩니다.
Markup
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.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
마지막으로 JS에서 Swiper를 초기화해야합니다.
<body>...</body>태그 내의 하단에 아래와 같이 javascript를 작성하시면 됩니다.
<body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>만약 jquery나 Zepto를 사용한다면 아래의 코드로 대체할 수 있습니다.
<script>
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true
})
});
</script>반응형
113
- 이전 댓글 더보기
