Flex-Slider-jQuery

JavaScript

シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

Flex-Slider-jQueryは、フレキシブルなスライダーを実装することができるjQueryプラグインです。画像を一枚ずつ表示させる一般的なシングルタイプのスライダーだけでなく、カルーセルのように複数の画像を表示させつつスライドできるマルチなタイプにも対応できるのがいいですね。

Flex-Slider-jQuery

Flex-Slider-jQuery

ダウンロードしたファイルでは、シングルモード、マルチモードの2つのデモページが用意されています。どちらも、画面の左右両端に前後移動できる矢印アイコンが表示されていて、ここから画像をスライドさせて切り替えることができます。

デモでは、シングルモードは一枚ずつ表示・スライドされ、マルチモードは3枚ずつ表示・スライドされるようになっています。

シンプルな操作性でサクサクとスライド動作するので、画像を効率的に、そして快適に見ていくことができます。

また、Flex-Slider-jQueryはフレキシブルなスライダーということで、レスポンシブにも対応しているのがうれしいポイントです。デモページの画面の横幅を縮小していくとわかりますが、画面の横サイズに合わせてスライダーのサイズも同時に変化していきます。

PCやスマホなどさまざまなデバイスからでも違和感なくスライダーを表示させたい人に最適ですね。

Flex-Slider-jQueryにはオプションもいくつか用意されています。主なオプションには、full_width、parent_width、single、slider_max_height、next_slide_space、slide_space、grid_space、slide_time、autoplay、play_duration、slider_type、slingle_slide_on_phoneといった項目があります。

オプションを調整しながら好みに合わせてカスタマイズしたい人にはうれしい仕様といえそうですね。

というわけで、シングルモードとマルチモードの2つのタイプに対応したフレキシブルなスライダーを実装できるjQueryプラグイン「Flex-Slider-jQuery」のご紹介でした。

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

Google+のような画像ギャラリーを実装できる「plusGallery」次のページplusGallery

関連記事

  1. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  2. DD Scroll Boxes
  3. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

  4. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  5. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  6. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP