miSlider

JavaScript

複数の画像を表示したりスライドしたりできるスライダー「miSlider」

miSliderは複数の画像やスライドの表示を可能にするスライダーを実装することができるjQueryプラグインです。いくつかの画像を見せながら、そのなかで効率よく見たいものをスライド表示させることができます。

miSlider

デモ

デモでは、複数の画像が水平に並べられており、右から左へ順番に自動スライドされるようになっています。表示された各アイテムのなかから、好きなものをクリックすると、そのアイテムが真ん中にくるようにスライドされる仕組みにもなっています。

一般的なスライダーのように、画像を1枚ずつ表示・スライドさせるのではなく、いろんな画像を見せながらスライドできるスライダーを実装したいときにはピッタリのjQueryプラグインですね。

プラグイン自体が軽量なところもうれしいポイントの一つです。

また、レスポンシブにも対応しており、実際にデモページのブラウザ幅を縮小していくとモバイル版に切り替わるのを確認できるかと思います。

モバイル版では画像が1枚だけの表示になりますが、左右に矢印アイコンが表示されるので、ここから前後に効率よくスライドさせることが可能です。

それから、PC版、モバイル版ともにスライダー下部にはナビゲーションも設置されているので、ここから好きなアイテムの場所までスライドすることもできます。

オプションには、speed、pause、increment、stageHeight、slidesOnStage、slidesContinuous、slidePosition、slideStart、slideWidth、slideScalingなど、たくさんの項目が用意されているので、カスタマイズ性もバツグンです。

レスポンシブ対応、軽量、クロスブラウザのサポート、豊富なオプション、優れたカスタマイズ性と、かなり魅力的なスライダーに仕上がっている印象です。

というわけで、複数画像を表示させつつ効率的なスライド表示を可能にしたスライダーを実装できるjQueryプラグインを探している人は、要チェックです。

miSlider

Huebeeオシャレなカラーピッカーを手軽に表示させれる「Huebee」前のページ

Webページ内でステップごとのガイドツアーを実装できる「Chariot」次のページChariot

関連記事

  1. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  2. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  3. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  4. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

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

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP