Pickupニュース

FlexSlider
jQueryプラグイン

FlexSlider

スライダー・カルーセルアニメーションjQueryプラグイン
FlexSliderはECサイト構築プログラムで有名なWooCommerceが公開している画像・コンテンツスライダーjQueryプラグインです。スライドを1枚ずつ表示するスライダーから、複数のスライドを同時に表示するカルーセルの設定も可能です。
このページでは、FlexSliderをWebサイトで使用するための導入から基本的な使い方を紹介しています。
3 カルーセルの設定
複数のスライドを一度に移動するカルーセルスライドアニメーションの設定です。

基本的なカルーセル設定

itemWidthプロパティにスライドの固定幅を指定します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide', itemWidth: 200 });

デモ

        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;          
        }
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide',
                itemWidth: 200
            });
        });
    

カルーセルスライド間にマージンを指定

itemMarginプロパティにスライド間のマージンを指定します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide', itemWidth: 200, itemMargin: 5 });

デモ

        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;          
        }
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide',
                itemWidth: 200,
                itemMargin: 5                
            });
        });
    

表示するカルーセルスライド枚数を指定

itemWidthプロパティの値によって、一度に表示するスライドがminItems(最小枚数)、maxItems(最大枚数)で表示されます。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide', itemWidth: 100, minItems: 2, maxItems: 3 });

デモ1

最小枚数のスライドを表示するデモです。全体の幅350pxでitemWidthを200pxと指定すると、一度に表示されるスライドは1枚と2枚目の途中までが表示されますが、minItemsを2としているので、2枚のスライドが表示されます。
        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;          
        }
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide',
                itemWidth: 200,
                minItems: 2,
                maxItems: 3                
            });
        });
    

デモ2

最大枚数のスライドを表示するデモです。全体の幅350pxでitemWidthを100pxと指定すると、一度に表示されるスライドは3枚と4枚目の途中までが表示されますが、maxItemsを3としているので、3枚のスライドが表示されます。
        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;          
        }
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide',
                itemWidth: 100,
                minItems: 2,
                maxItems: 3                
            });
        });
    

移動するカルーセルスライドの枚数を指定

移動するカルーセルスライドの枚数をmoveプロパティで指定します。通常は、カルーセルスライドは表示している枚数だけ移動します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide', itemWidth: 100, minItems: 2, maxItems: 3, move: 2 });

デモ

        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;          
        }
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide',
                itemWidth: 100,
                minItems: 2,
                maxItems: 3,
                move: 2        
            });
        });
    

カルーセルのオプション

FlexSliderでカルーセルを設定するオプションです。
プロパティ 内容 初期値 パラメータ
itemWidth カルーセルスライドの幅 0 整数
itemMargin カルーセルスライドの間隔 0 整数
minItems 表示するスライドの最小枚数値 0 整数
maxItems 表示するスライドの最大枚数値 0 整数
move 移動するカルーセルスライドの枚数 0 整数
1 2 3 4

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください