infiniteSlider2.js

JavaScript

シンプルな操作性でカスタマイズ性にも優れたスライダー実装「infiniteSlider2.js」

infiniteSlider2.jsは、シンプルな操作性で使いやすいスライダーを実装することができるjQueryプラグインです。前後移動できる左右矢印や、下部ナビゲーションを有するほか、豊富なオプションによりカスタマイズ性にも優れています。

infiniteSlider2.js

デモ

デモではスライダーにマウスオーバーすることで、前後移動できる左右の矢印と下部ナビゲーションが表示されます。下部ナビゲーションでは、各項目にマウスオーバーするとサムネイルっぽいアイテムが表示されます。

スライド移動する際に、どういったコンテンツの特色なのかを簡単にチェックできるのは便利ですね。

デモのスライダーはオートプレイになっているので、自動でスライド移動していきます。最後のコンテンツまでスライドされると、また始めのコンテンツに戻りそこからスライドしていきます。

また、infiniteSlider2.jsには豊富なオプションが用意されており、自分好みにカスタマイズして使いたい人にはピッタリです。

具体的には、width、height、arrows、toggles、labels、slideBackgroundColor、slideBackgroundImage、arrowWidth、arrowHeight、toggleShape、toggleWidth、toggleHeight、slideLabelWidth、slideLabelHeight、autoplay、slideInterval、slideDuration、cursorなどといったオプション項目のセッティングが可能です。他にもまだまだオプションがあるので、気になる方はぜひチェックしてみてください。

というわけで、シンプルな操作性で使いやすい上にカスタマイズ性にも優れているスライダーを実装できるjQueryプラグインを探している方は、ぜひ活用されてみてはいかがでしょうか?

infiniteSlider2.js

関連記事

  1. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  2. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  3. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  4. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

  5. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  6. no-image

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP