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

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

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

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

とこんな感じです。

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

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

DEMO

carouFredSelの使用方法

 

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

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

Circular, Responsive jQuery Carousel – CarouFredSel

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

 

XHTML

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.carouFredSel.js"></script>

1 2	<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.carouFredSel.js"></script>

HTMLは、

XHTML

<ul class="slider"> <li><img src="sample1.jpg"></li> <li><img src="sample2.jpg"></li> <li><img src="sample3.jpg"></li> <li><img src="sample4.jpg"></li> </ul>

1 2 3 4 5 6

<ul class="slider">         <li><img src="sample1.jpg"></li>         <li><img src="sample2.jpg"></li>         <li><img src="sample3.jpg"></li>         <li><img src="sample4.jpg"></li> </ul>

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

<script type="text/javascript"> $(document).ready(function() { // Using default configuration $(".slider").carouFredSel(); }); </script>

1 2 3 4 5 6 7 8

<script type="text/javascript">   $(document).ready(function() {   // Using default configuration $(".slider").carouFredSel(); });     </script>

これでOKです！！

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

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

 

JavaScript

<script> $(document).ready(function() { // Using default configuration $(".slider").carouFredSel({ responsive : true, scroll : { items : 1, easing : "swing", fx : 'cover', duration : 1000 } }); }); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script>   $(document).ready(function() {   // Using default configuration $(".slider").carouFredSel({ responsive : true, scroll : {             items           : 1,             easing          : "swing", fx : 'cover',             duration        : 1000         } }); });     </script>

 

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