모바일 페이지에 Swipe 배너를 붙여야 될 일이 발생했다.
구글링을 하던 중 기가막히는 라이브러리를 발견했으니..흔적을 남겨줘야 되겠다 싶어서 글을 작성..
사이트 구경하기 -> http://www.idangero.us/swiper/
가벼우면서도 많은 기능을 제공한다.
사용방법 또한 엄청 간단하고, Demo 정리도 잘 되어 있다.
기본적인 사용을 위해서 일단 메인 페이지에서 다운로드를 받는다.
압축을 풀면 Demo부터 종합선물(?) 세트로 다 들어 있다.
간단한 Demo를 하나 만들어보았다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Swiper Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- 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 class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination', // 페이징 추가 할 위치 지정
paginationClickable: true, // 페이징 클릭 가능 여부
autoplay:2000, // 자동이동 설정 (millisecond)
autoplayDisableOnInteraction: false, // 사용자 상호 작용 후 해제,비해제 여부
loop: true // Loop 사용여부
});
</script>
</body>
</html>
CSS와 JS경로만 잡아주면 바로 실행가능하다.
API 문서를 보면 추가 할 수 있는 옵션값 또한 많다.
위의 코드는 옵션 몇 가지만 추가해본 코드이다.
'JavaScript' 카테고리의 다른 글
| Count UP 구현하기 (0) | 2015.12.17 |
|---|---|
| 날짜 체크 하기 (0) | 2015.12.15 |
| userAgent 정보 가져오기 (0) | 2015.12.11 |
| Callback Function (0) | 2015.12.04 |
| replace - 문자열 변환 (0) | 2015.11.25 |
