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. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

  2. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  3. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  4. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  5. jQuery contextMenu plugin & polyfill
  6. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP