強力そうなスワイプ対応のjavascriptスライダーの使い方です。Jqueryオンリーでないので、フリクションしにくいのも利点です。
※Jquery系スライダーならflexsliderも翻訳しましたよ。Jqueryでどうしてもいきたい場合にはいいかもね。
Swiperの素晴らしいところは入れ子でスライダーが組めるところですが、こんな使い方をするサイトを考えるのも難しいってほど複雑なことができます。
使い方は本サイトを見ればだいたいわかるでしょう。とにかく使ってみないと掴めないヤツですね。
【Swiper Usage and API】本サイトの使い方ページ（英語）
http://www.idangero.us/sliders/swiper/api.php
しかし英語じゃあ読みにくいよ。オプションを日本語訳してみました。設置のしかたは本サイトで大体わかると思いますが、どうオプションを組み合わせていくかが迷いどころ。英語じゃわかりづらいので日本語にしてみました。バージョンによっては実装されていない項目もありますが、最新版をダウンロードしてくる分には問題ありません。
使い方（Usage）
1. GitHubから最新バージョンのSwiperをダウンロードする。 here .
2. CSSとJAVASCRIPTのファイルリンクタグをHEAD内に設置 :
<head>
....
<link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
<script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
....
</head>
3. HTMLをこんな感じで入れる（これは3枚のスライドの例）:
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide">
<!-- ここにスライド１の内容を好きなように設置する -->
</div>
<!--Second Slide-->
<div class="swiper-slide">
<!-- ここにスライド２の内容を好きなように設置する -->
</div>
<!--Third Slide-->
<div class="swiper-slide">
<!-- ここにスライド３の内容を好きなように設置する -->
</div>
<!--Etc..-->
</div>
</div>
4. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定（ファイルの最後のほうにある）:
...
/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
width: 500px;
height: 200px;
}
5. Initialize（初期化） ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる:
<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })
もしくはJAVASCRIPTのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}
もしくはJAVASCRIPTのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)
という感じで
=======*/
/*
jQueryまたはZeptoの場合。
*/
$(function(){
var mySwiper = $('.swiper-container').swiper({
//オプションをここに:
mode:'horizontal',
loop: true
//etc..
});
})
/* 上か下かのどちらかを記述する。Jqueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */
window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
//オプションをここに:
mode:'horizontal',
loop: true
//etc..
});
}
</script>
次のページはオプションの翻訳。翻訳してきれていないところはすみません、あとでやりますよ。
[…] Swiperプラグイン【日本語訳 】スワイプ対応のjavascriptスライダー […]
[…] Swiperプラグイン【日本語訳 】スワイプ対応のjavascriptスライダー […]
[…] かりやすかったのがswiperオプションを日本語に訳してくれたサイト。 swiperオプション(日本語) […]