jQueryプラグイン「cycle」を利用してサムネイル付スライダーをつくる

前回、「bxslider」というプラグインを利用してサムネイルつきのスライダーをつくったのですが、このプラグイン、「Next」[Prev][サムネイル]をクリックすると自動再生が止まってしまうようです。 これは困ったといろいろ解決策を探してみましたが結局見つけることができませんでした。

たまたま別で試したことがある「cycle」というプラグインでも同様のことができそうだったので対応してみました。
ということで以下備忘録。

cycleの設定はこんな感じ、jQueryでごにょごにょ書きます。
サムネイルの部分はbefor/afterで追加するんですね。あと(idx+1)でカウントアップしているので、ファイル名のつけ方をそれに合わせる必要がありますね。今回は適当だけど、桁を調整しないとなぁ...。

$(function() {
    $("ul#slides").after('<ul id="slide-thumb">').cycle({
      fx:	'scrollHorz',
      pause: 1,
      prev: '#prev',
      next: '#next',
      pager: '#slide-thumb',    
      pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="img/thumb_00'+(idx+1)+'.jpg"/></a></li>'; 
      }
    });
  });

htmlはこんな感じ

<div id="slideshow">
      <ul id="slide-nav">
        <li id="prev"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>
      </ul>
    
      <ul id="slides">
        <li><img src="img/001.jpg" alt=""></li>
        <li><img src="img/002.jpg" alt=""></li>
        <li><img src="img/003.jpg" alt=""></li>
        <li><img src="img/004.jpg" alt=""></li>
        <li><img src="img/005.jpg" alt=""></li>
      </ul>
    <!-- /#slideshow --></div>
  

このプラグインも高機能みたいなので、こっちを使ったほうがよいかもしれませんね。
サンプル