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. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  2. gridscrolling.js
  3. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  4. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  5. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  6. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP