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. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP