jQuery スマホフリック対応スライドショー プラグイン

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

jQuery スマホフリック対応スライドショー プラグイン

みやびプリン 500 316

144 144

※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

またこんな時間だ・・・。
（AM 01:15）

さて、会社にて、スライドショーjQueryプラグイン作ったので公開してみた。

以前作った、スマホ用フリックスライドショーの改良版で、
スマホ、PC両方対応型です。

●jQuery Simple Slide Show

前回も言ったけどシンプルでいいんだよ、プラグインはごちゃごちゃした機能はいらないのだよ。
カスタマイズしやすいのが一番！

使い方は、簡単


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.sslideshow.1.0.min.js">
<script>
$(function(){

 //フリック表示させたいブロックのセレクタに、sslideshowを適用
$('.slideView').simpleSlideShow({
  slideBtnPrev: '前へ',
  slideBtnNext: '次へ'
});

});
</script>
</head>
<body>
<div class="slideView">
  <ul>
    <li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
  </ul>
</div>
</body>

divかなんかに、リストのラッパー要素(ulとか)、その中にリスト要素(liとか)って構造でタグをつける。
その一番外側のタグに対してプラグイン関数を効かせる。
そんだけ。

機能としては前回同様、
・フリックできる。
・自動スライドショー
・次へ前へボタン
・左右に次・前のスライドを表示可能
・サイズの指定可能
・中身は自由に編集できる
・サムネイルも付けれる
・PC、スマホ自動振り分け
・フェードとスライドの切り替えアリ
ってとこか。

ちなみに、サムネイルは、自分で定義すれば、それを使ってくれる。
下記のように、"S3-thumbList"ってクラスをつけたul、liタグを、スライドショー本体の後ろにくっつけてくれればいい。

<div class="slideView">
  <ul>
    <li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
  </ul>
  <ul class="S3-thumbList">
    <li><img src="images/thumb01.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/thumb02.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/thumb03.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/thumb04.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/thumb05.jpg" alt="" width="100%" height="auto"></li>
  </ul>
</div>

オプションは下記になります。

オプション名 説明 値の形式 初期値
shiftTime 自動スライド時の、
次のスライドまでの時間		 数値 6000
speedMove スライドが
動く時間		 数値 800
slideMode フェードかスライドかを選択 slide / fade
（文字列）		 slide
listWidth スライド単体の横幅 数値(スマホ%指定、PCはpx指定) auto
listHeight スライド単体の縦幅 数値(スマホは%指定←横幅に対して、PCはpx指定) auto
tagSingle スライド単体の
タグ指定		 タグ名 li
tagWrapper スライドを
囲っているタグ指定		 タグ名 ul
slideBtnOn 次へ・前へボタンを表示させるかどうか true/false
（真偽値）		 true
autoSlide 自動スライドさせるかどうか true / false
（真偽値）		 true
slideBtnPrev 前へボタンの中身を指定 テキスト、タグ
（imgも可能）		 -
slideBtnNext 次へボタンの中身を指定 テキスト、タグ
（imgも可能）		 -
thumbList サムネイルを表示させるかどうか true / false
（真偽値）		 true
thumbContents サムネイルliタグの中身を定義 テキスト、タグ
（imgも可能）		 -
reverseParsent フリックが
中途半端な時に
どれくらいで戻すかの指定		 数値（横幅/数値） 8
loadingBlock フリック時、ループの
一番最後or最後に来た時に表示する、
ローディングブロックの中身		 テキスト、
タグ（imgも可能）		 Loading...
flick スライドモードの時、スマホでフリック可能にするかしないか true / false
（真偽値）		 true

前回のやつから、若干オプション増えてます。

にしても、2年前くらいは、同じもの作るのに、5、6倍の時間かかったけど、
今は案外すんなりいった。
オブジェクト指向のおかげですぁ

さて、寝る。

トラックバック(0)

トラックバックURL:

コメントする

※
※
※

ページトップへ戻る