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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  2. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  3. Simple Lightbox
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  5. EZ Tabs jQuery Plugin
  6. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

最近の記事

  1. CHA-SAJI
  2. SLE-19P
  3. Soundcore Ace A0
  4. Fire 7 タブレット

アーカイブ

PAGE TOP