Pickupニュース

FlexSlider
jQueryプラグイン

FlexSlider

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

スライドの下にキャプション

スライドの下にキャプションを表示します。

HTMLマークアップ

<img>タグのalt属性にキャプションとして表示するテキストを追加します。
HTMLCopy
<div class="flexslider"> <ul class="slides"> <li><img src="../images/photo01-m.jpg" /><p class="flex-caption">机の上のキーボード</p></li> <li><img src="../images/photo02-m.jpg" /><p class="flex-caption">珈琲とメモ帳</p></li> <li><img src="../images/photo03-m.jpg" /><p class="flex-caption">白いデスク周り</p></li> <li><img src="../images/photo04-m.jpg" /><p class="flex-caption">キーボードとマウス</p></li> <li><img src="../images/photo05-m.jpg" /><p class="flex-caption">マウスに焦点</p></li> <li><img src="../images/photo06-m.jpg" /><p class="flex-caption">モニターは2つ</p></li> <li><img src="../images/photo07-m.jpg" /><p class="flex-caption">タッチパッドで操作</p></li> <li><img src="../images/photo08-m.jpg" /><p class="flex-caption">昼休みに留守番</p></li> <li><img src="../images/photo09-m.jpg" /><p class="flex-caption">上から見たデスク</p></li> <li><img src="../images/photo10-m.jpg" /><p class="flex-caption">やっぱりThinlpadやで</p></li> </ul> </div>

スタイルシートの設定

スタイルシートに以下のような記述を追加します。
CSSCopy
.flex-caption { padding: 3px 10px; margin: 0; background: #000; color: #fff; font-size: 12px; }

JavaScriptの記述

キャプション表示のために追加する記述はありません。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide' });

デモ

        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /><p class="flex-caption">机の上のキーボード</p></li>
                <li><img src="../images/photo02-m.jpg" /><p class="flex-caption">珈琲とメモ帳</p></li>
                <li><img src="../images/photo03-m.jpg" /><p class="flex-caption">白いデスク周り</p></li>
                <li><img src="../images/photo04-m.jpg" /><p class="flex-caption">キーボードとマウス</p></li>
                <li><img src="../images/photo05-m.jpg" /><p class="flex-caption">マウスに焦点</p></li>
                <li><img src="../images/photo06-m.jpg" /><p class="flex-caption">モニターは2つ</p></li>
                <li><img src="../images/photo07-m.jpg" /><p class="flex-caption">タッチパッドで操作</p></li>
                <li><img src="../images/photo08-m.jpg" /><p class="flex-caption">昼休みに留守番</p></li>  
                <li><img src="../images/photo09-m.jpg" /><p class="flex-caption">上から見たデスク</p></li>
                <li><img src="../images/photo10-m.jpg" /><p class="flex-caption">やっぱりThinlpadやで</p></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;
        }
        .flex-caption{
            font-size: 12px;
            margin: 0;
            padding: 3px 10px;
            color: #fff;
            background: #000;
        }        
    

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

スライド下端にオーバーラップキャプション

スライドの下端にキャプションをスライドにオーバーラップして表示します。

スタイルシートの設定

CSSCopy
.flexslider .slides > li{ position: relative; } .flexslider .slides > li img{ position: relative; } .flex-caption { position: absolute; left: 0; bottom: 0; width: calc(100% - 20px); padding: 3px 10px; margin: 0; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }

デモ

        
        <div class="flexslider">
            <ul class="slides">
                <li><img src="../images/photo01-m.jpg" /><p class="flex-caption">机の上のキーボード</p></li>
                <li><img src="../images/photo02-m.jpg" /><p class="flex-caption">珈琲とメモ帳</p></li>
                <li><img src="../images/photo03-m.jpg" /><p class="flex-caption">白いデスク周り</p></li>
                <li><img src="../images/photo04-m.jpg" /><p class="flex-caption">キーボードとマウス</p></li>
                <li><img src="../images/photo05-m.jpg" /><p class="flex-caption">マウスに焦点</p></li>
                <li><img src="../images/photo06-m.jpg" /><p class="flex-caption">モニターは2つ</p></li>
                <li><img src="../images/photo07-m.jpg" /><p class="flex-caption">タッチパッドで操作</p></li>
                <li><img src="../images/photo08-m.jpg" /><p class="flex-caption">昼休みに留守番</p></li>  
                <li><img src="../images/photo09-m.jpg" /><p class="flex-caption">上から見たデスク</p></li>
                <li><img src="../images/photo10-m.jpg" /><p class="flex-caption">やっぱりThinlpadやで</p></li>                                                
            </ul>
        </div>
    

        .flexslider{
            max-width: 480px;
            margin: 0 auto 60px;
        }
        .flexslider .slides > li{
            position: relative;
        }
        .flexslider .slides > li img{
            position: relative;
        }
        .flex-caption{
            font-size: 12px;
            position: absolute;
            bottom: 0;
            left: 0;
            width: calc(100% - 20px);
            margin: 0;
            padding: 3px 10px;
            color: #fff;
            background: rgba(0, 0, 0, .6);
        }      
    

        $(function () {
            $('.flexslider').flexslider({
                animation: 'slide'
            });
        });
    
1 2 3 4

コメントを残す

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