Pickupニュース

FlexSlider
jQueryプラグイン

FlexSlider

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

FlexSliderのリンク(ファイルをダウンロードして利用する場合)

リンク先のDOWNLOAD FLEXSLIDERをクリックして、ファイルをダウンロードします。

Webサイト

FlexSliderフォルダの作成

flexsliderという名前のフォルダを新規作成し、そこにダウンロード・解凍後のwoocommerce-FlexSliderフォルダの中からjquery.flexslider.js(またはjquery.flexslid-miner.js)、flexslider.cssfontsフォルダを移動します。

HTMLマークアップ

サーバーに作成したflexsliderフォルダをアップロードし、<head>タグ内にflexslider.jsとjQueryまでのパス、flexslider.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/flexslider/jquery.flexslider.js"></script> <link rel="stylesheet" href="path/flexslider/flexslider.css" />

FlexSliderのリンク(CDNを利用する場合)

FlexSliderはCDN配信サービスcdnjsでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているflexslider.jsとjQueryまでのパス、flexslider.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css" />

基本的な使い方

FlexSliderはスライダーを表示したいdiv要素(ここではクラス:flexslider)下の<ul>タグにクラス:slidesを付与して使用します。

HTMLマークアップ

クラス:slidesを付与した<ul>タグ以下の<li>タグにスライドとして表示したい画像を追加します。
HTMLCopy
<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>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.flexslider').flexslider({ animation: 'slide' //アニメーションをスライダーに設定 });

デモ

        
        <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'
            });
        });
    
1 2 3 4

コメントを残す

記事ランキング