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

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  2. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  3. no-image

    JavaScript

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

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

  4. no-image
  5. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP