jQuery sliderの決定版『swiper.js』
今回は使いやすいjQuery sliderをご紹介しようと思います。
レスポンシブ・タッチスワイプ対応な上、ブロック要素でコンテンツ配置も自由自在の万能スライダー『swiper.js』
KEY SENTENCE
[1] 実装方法
[2] カスタマイズ方法
[3] 動作デモ
[1] 実装方法
インストール方法
まずは下記URLよりダウンロードします。
Download ZIPをクリックして圧縮ファイルをダウンロードし、解凍解凍して下さい。
解凍したファイルから必要なのは、
idangerous.swiper-2.1.min.js
idangerous.swiper.css
この２つになります。
実装の準備を行う
実装方法は、
head内からスタイルシートを任意のディレクトリから読み取り、
<head>
<link rel="stylesheet" href="css/idangerous.swiper.css">
</head>
bodyの最後にjsファイルを任意のディレクリから読み出します。
<body>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
</body>
defaultテーマを実装してみる
実装の準備ができたら実際に実装してみましょう。
ここではdefaultテーマの実装方法をご紹介します。
HTMLの実装
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
<div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
CSSの設定
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
.device {
width: 640px;
height: 300px;
padding: 30px 40px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
position: relative;
box-shadow: 0px 0px 5px #000;
}
.device .arrow-left {
background: url(img/arrows.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
.device .arrow-right {
background: url(img/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
.swiper-container {
height: 300px;
width: 640px;
}
.content-slide {
padding: 20px;
color: #fff;
}
.title {
font-size: 25px;
margin-bottom: 10px;
}
.pagination {
position: absolute;
left: 0;
text-align: center;
bottom:5px;
width: 100%;
}
.swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #999;
box-shadow: 0px 1px 2px #555 inset;
margin: 0 3px;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
}
defaultテーマではデバイス内にcssで作成したデバイスイメージ内にスライダーを実装するというもののためcssが長くなっていますが、スライダー設置のみであれば、.swiper-containerのみで実装が可能です。
またページネーションを付けるのであれば、.pagination / .swiper-pagination-switch / .swiper-active-switchも実装してあげてください。
スクリプトの記載
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
ここでは簡易的に実装するため、<script src=”js/idangerous.swiper-2.1.min.js”></script>直下にそのまま記載します。外部に.jsファイルを作成し、読み出しての指示ももちろん可能です。
とりあえずはこれで完成です。
※ バージョンは記事作成時のものです。バージョンによってファイル名が異なる可能性があります。
[2] カスタマイズ方法
scriptをカスタマイズする
| speed: | アニメーション速度（ミリ秒） |
| autoplay: | 自動的に切り替わるまでの待ち時間。 指定しない場合自動的にスライドが切り替わらなくなる |
| mode: | horizontal / vertical horizontalは横スライド、verticalは縦スライドの指定 |
| pagination: | .pagination パージネーションマーカのクラスの指定を行います |
| paginationClickable: | true / false true にすると、ページネーションマーカーをクリックしてスライドを切り替えられるようになります |
| centeredSlides: | true / false true にするとスライダーコンテンツがセンター寄せになります |
| loop: | true / false true にすると端まで行ったらはじめに戻ります |
| grabCursor: | true / false true にすると、スライドにマウスを当てるとカーソルがグラブになって要素を掴んでスライドできることを明示することができます |
| touchRatio: | 0~1.0 操作などでどの程度スライドをひっぱったらスライドするかのしきい値。 数が大きくなるほどすぐ反応するようになります。 |
| calculateHeight: | true / false true にすると、自動的に高さを計算してくれます。 |
基本的には上記内容の指示でだいたいカバーできますが、この他にもたくさんのオプション・APIが用意されています。
詳しくは、Swiper Usage and APIをご覧ください。
[3] 動作デモ
公式サイトにたくさんの動作デモが掲載されているので、こちらで確認してお好きなスライダーを設置しましょう。
種類もかなり豊富なので、選ぶのもまた楽しいですよ。
01-default.html
02-vertical-mode.html
03-dynamic-slides.html
04-scroll-container.html
05-free-mode.html
06-carousel-mode.html
07-carousel-loop.html
08-nested.html
09-nested-loop.html
10-tabs.html
11-tabs-feedback.html
12-partial-display.html
13-threshold.html
14-different-widths.html
15-centered-slides.html
16-visibility-api.html
17-responsive.html
18-pull-to-refresh.html
最後にライセンスですが、このようになっています。
Swiper is licensed under GPL & MIT
以上です。参考までに。
