表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。
flexslider 2

オプションや機能

サムネイルナビゲーション
複数表示のカルーセル
高さ自動調整(smoothHeight)
レスポンシブ
スワイプ
など

スクリプト

<link href="flexslider.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.flexslider-min.js" type="text/javascript"></script>

実装

<div class="flexslider">
    <ul class="slides">
        <li><img src="image1" /></li>
        <li><img src="image2" /></li>
        <li><img src="image3" /></li>
    </ul>
</div>

<script type="text/javascript">
$(window).load(function() {
    $('.flexslider').flexslider({
    });
});
</script>

Related

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン レスポンシブ対応の画像スライダー・ギャラリー用プラグイン シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 カルーセル プラグイン ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」 レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」 画像ギャラリーを実装できる「Galleria」 スワイプ対応の画像スライダー・ギャラリー用プラグイン