Blog

カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」

今回は、かなり使えそうなjQueryプラグイン「carouFredSel」というものをご紹介します。

カルーセルやスライダーにもなるということで、以前、bxSliderというプラグインを紹介しましたが、そちらよりも、機能はあるかもしれません。(その記事はこちら)

こちらのプラグインでできることを簡単にあげますと、

・オプションが豊富で、自由にカスタマイズできる
・スライドを自動/手動、マウスホイール、スワイプ等で設定可能
・レスポンシブやリキッド等のレイアウトに対応
・ページネーション、次へ、前へのボタンの設置が可能
・スライドの向き(上下左右)、エフェクト(9種類)、イージング(5種類)から設定可能
・スライド毎の横幅、縦幅が別でも伸縮してスライドしてくれる
・動的に、スライドを追加したり、削除することが可能

とこんな感じです。

なにより、高さが違うものをスライドできるのは、すごいですね。
写真だけでなく、HTMLで組んだコンテンツをスライドするのに良いかと思います。

ワンパターンですが、DEMOを作成しましたので、
ご覧ください。

DEMO

 

carouFredSelの使用方法

 

とっても簡単に使用できます。

まず下記サイトからダウンロードします。

Circular, Responsive jQuery Carousel – CarouFredSel

タグ内に以下の記述をします。
(スワイプや、マウスホイールをさせたい場合は、別途プラグインが必要になりますが、そちらもダウンロードファイルの中に入ってます。)

 

HTMLは、

そして、javascriptを、タグ内に記述します。

これでOKです!!

あとは、オプションをいろいろ使用すれば、
いかようなスライド、カルーセルの完成です!

ちなみに、デモのスクリプト部分は、以下のようになってます。

 

 

もっとカスタマイズしたものをまた改めて書けたら、書きます!

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ