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」のご紹介でした。

関連記事

  1. Expanding Bar Navigation Concept
  2. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  3. No Vacancy

    JavaScript

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

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

  4. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  5. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  6. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP