jQuery フリックスライドショープラグインだ！

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

投稿日：2015年12月03日更新日：2015年12月04日

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

おはようございます。

いつもより少しだけ早く起きた（8時）
なので（？）、表記の通り公開してみた。

スマホ用のフリックスライドショーです。
その名も、Simple Flicker View　だ！

僕は、あれなんですよ、プラグインとかね、多機能なの多いけど、そんなのいらないのよ。
シンプルでいいのよ、シンプルで。
あと改造しやすいのがいいね。
というわけで、自作するわけですよ。

さて前置きはいい、まずはスクリプト！

●jquery.sfv.js
●jquery.sfv.min.js
(min版、は軽量版です。どっちでも動く)

スクリプトだけ書かれた画面が出るので、コピペしてお使いください。

さて、使い方は、下記。


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

 //フリック表示させたいブロックのIDを入れたリンクのクラスに、sfvを適用
$('#flickView').simpleFlickerView({
  slideBtnPrev: '前へ',
  slideBtnNext: '次へ',
  reverseParsent: 100,
  listWidth: 80
});

});
</script>
</head>
<body>
<div id="flickView">
  <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とか)って構造でタグをつける。その一番外側のタグに対してプラグイン関数を効かせる。すると、自動で下記DOMを生成してくれる。

<div id="flickView" class="SFVWrapperObj">
  <ul class="SFVSlideShiftBtn">
    <li class="SFVShiftPrev"><a href="javascript:void(0);">前へ</li>
    <li class="SFVShiftNext"><a href="javascript:void(0);">次へ</li>
  </ul>
  <div class="SFVSliderWrapper">
    <ul class="SFVSliderList">
      <li class="SFVCopyList"><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
      <li class="SFVCopyList"><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
      <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>
      <li class="SFVCopyList"><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
      <li class="SFVCopyList"><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
    </ul>
  </div>
  <div class="SFVLoadingBlock" style="width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; display: none; position: absolute; z-index: 10;">Loading...</div>
</div>

機能としては、
・フリックできる。
・自動スライドショー
・次へ前へボタン
・左右に次・前のスライドを表示可能
・サイズの指定可能
・中身は自由に編集できる
ってとこか。

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

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

シンプルかつ、各種の設定は細かく、と作ってみますた。
CSSでの表示の仕方もわりとしやすく、って感じで作ったつもりです。

MITライセンスなので、
じゃんじゃん改造などお好きにお使いください。

さて、会社行こう。