jCarouselLiteを使ってみた

表示されている記事ページに関連記事のリストを小さく表示しているのだが、こそっと表示していることもあって最大４件だけが表示される小さなボックスになっています。他のサイトなどを観ると、横にスクロールしてリストをできるだけ多く見せている所が多いです。自分もやってみようと思って、jCarouselLiteというJavascriptのプラグインを入れてみました。他に幾つか入れて見たのですが動作したのがこれだけだったのでこれにしました。
ちなみに横スクロールするこのUIをカルーセルというようです。

ダウンロード

以下のサイトからjsファイルをダウンロードします。2014年からバージョンが上がってないようなので、結構古いですｗ
jCarouselLite: http://www.gmarwaha.com/jquery/jcarousellite/

実装

ダウンロードファイルを展開して、jquery-jcarousellite.min.jsファイルをスクリプトを読み込むための任意のフォルダにコピーします。
head内に読み込み定義をします。
<script type=”text/javascript” src=”js/jcarousellite.min.js”></script>

実行するコードは以下です。横スクロールしたいリストと左右スクロールするためのリンクのクラス名を指定します。

<script type=“text/javascript”>
  $(function() {
    $(".carousel-list").jCarouselLite({
      btnNext: ".next",
      btnPrev: ".prev",
      visible: 4,
      speed: 100,
      circular: false,
    });
  });
</script>

HTMLの記述は以下です。リストと左右スクロールのリンクに上記で指定するクラス名を付けます。

<div class="carousel">
  <a href="#" class="prev">Prev</a>
  <a href="#" class="next">Next</a>
<div class="carousel-list">
  <ul>
  <li><img src="image/1.jpg" alt="" width=“100" height="100" /></li>
  <li><img src="image/2.jpg" alt="" width="100" height="100" /></li>
  <li><img src="image/3.jpg" alt="" width="100" height="100" /></li>
  <li><img src="image/4.jpg" alt="" width="100" height="100" /></li>
  </ul>
</div>

とても簡単に実装できました。ただ、スマホフレンドリーではないので、スワイプなどでスクロールできないです。左右スクロールのリンクをタップする感じです。