Jqx-Media-Slider

JavaScript

カスタマイズ性に優れたスライダーやカルーセルのjQueryプラグイン「Jqx-Media-Slider」

Jqx-Media-Sliderはカスタマイズ性にとても優れたスライダーやカルーセルを実装することができるjQueryプラグインです。アイテムの幅や高さを設定したり、画像はもちろん動画やテキストコンテンツをスライドさせることもできます。

[ads_center]

Jqx-Media-Slider

Jqx-Media-Sliderの実際のデモやダウンロード、または使い方の詳細に関しては以下からチェックすることができます。

Jqx-Media-Slider

Jqx Media Slider

サポートしているブラウザは、IE9+やモダンブラウザ(Chrome、Firefoxなど)です。

オプションでitemWidthやitemHeightを設定できる他、widthBetweenItems、changeOffset、sliderButtons等といったものも指定することができるようになっています。

スライダーの左右には前後にスライドさせる矢印がついており、アイテムをたくさん並べた状態で1つずつスライドさせたり、逆にある程度まとめてスライドさせることもできます。

他にもコンテナ幅いっぱいに1つのアイテムを表示させたりすることも可能なので、カスタマイズして自分の目的に合わせたスライダーやカルーセルを作っていくことができそうですね。

デモではミニマルな構成ものからChanged Offsetを使用したもの、または幅と高さを指定したタイプからフルワイドのカルーセルまでたくさんの種類を見ることができます。

YouTubeが使われているサンプルまであるので、一通り確認してみるだけでも楽しめそうですね。

関連記事

  1. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  2. PIGNOSE-ParallaxSlider
  3. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

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

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  5. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  6. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP