HOME

ABOUT

ARCHIVES

CONTACT

javascript

jQuery sliderの決定版『swiper.js』

今回は使いやすいjQuery sliderをご紹介しようと思います。

レスポンシブ・タッチスワイプ対応な上、ブロック要素でコンテンツ配置も自由自在の万能スライダー『swiper.js

KEY SENTENCE

[1] 実装方法

[2] カスタマイズ方法

[3] 動作デモ

[1] 実装方法

インストール方法

まずは下記URLよりダウンロードします。

GitHub

Download ZIPをクリックして圧縮ファイルをダウンロードし、解凍解凍して下さい。

解凍したファイルから必要なのは、

idangerous.swiper-2.1.min.js

idangerous.swiper.css

この2つになります。

実装の準備を行う

実装方法は、

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] 動作デモ

公式サイトにたくさんの動作デモが掲載されているので、こちらで確認してお好きなスライダーを設置しましょう。

Swiper Demos

種類もかなり豊富なので、選ぶのもまた楽しいですよ。

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

以上です。参考までに。