@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

ティッカーっぽいjQueryのイメージスライダーを作った

regular jquery jquery plugin

ティッカーっぽく画像が次々に流れるスライダーが案件に必要になり、思い切って作ってみました。
折角なので公開しようかと思います。

コード

プラグインは以下の場所においています。
見て頂けますと幸いです。

jquery-imageslider.js

デモ

デモ用のページを作成しました。
実際の動きは以下のページをご確認ください。

Demo Page

コードの書き方

HTML及びCSSの書き方は以下のとおりです。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.imageslider.js"></script>
<script>
$(function() {
    $('.js-imageslider').imageslider({
        slideItems: '.item',
        slideContainer: '.list',
        slideDistance: 5,
        slideDuratin: 800,
        resizable: true
    });
});
</script>
</head>
<body>
<div class="js-imageslider">
<ul class="list">
<li class="item"><img src="hoge.jpg" alt=""></li>
<li class="item"><img src="foo.jpg" alt=""></li>
<li class="item"><img src="bar.jpg" alt=""></li>
</ul>
</div>
</body>

オプションについて

  • slideItems: スライドさせる要素を指定します
  • slideContainer: スライドさせる要素の親要素を指定します
  • slideDistance: スライドする距離を指定します(px)
  • slideDuration: スライドする速さを指定します(ms)
  • resazable: 横幅の可変に対応します

今後追加していきたい機能について

取り急ぎ案件に必要な最低限の機能しかない状態なので、今後は下記のように色々機能を付けたいですね...！

  • 左右のボタン
  • 逆向きのスクロール
  • :hover時に止まったり動いたり etc...

意外とこの動きをするプラグインって無いんですよね。。
バグ等ありましたら教えていただけると助かります！
よければ使ってくださいね。