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. Sticky Slider Navigation(Responsive)
  2. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  3. Expanding Bar Navigation Concept
  4. A simple DIY responsive image slideshow
  5. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  6. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP