WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

flexsliderのmanualControlsを使ってサムネイルと連動させる

      2015/08/19

便利で有名なjqueryのスライダープラグインflexsliderですが、manualControlsオプションを使ってサムネイルと連動させる方法をメモ。

controlNavオプションやカルーセル(sync、asNavForオプション)を使ったときはレイアウトが自由に簡単にカスタマイズできません。

↑勝手にサムネイル画像の効果がつく。カスタマイズは本体の解析が必要。

 

manualControlsオプションで簡単に連動できる

サンプルコードです。

javascript

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

<script type="text/javascript" >
    $(function() {
        $('#slider').flexslider({
            controlsConatiner: '.flexslider-controls',
            manualControls: ".thumb li",
        });
    });
</script>

controlsConatiner:連動させるクラスを指定
manualControls:サムネイルを追加する要素を指定。スライダーの切り替えに連動して子の要素に「.flex-active」クラスが動的に追加される。

 

html

<--スライダー-->
<div id="slider" class="flexslider">
     <ul class="slides">
         <li><img src="slider01.png"></li>
         <li><img src="slider02.png"></li>
         <li><img src="slider03.png"></li>
     </ul>
</div>
<--サムネイル-->
<div class="flexslider-controls">
     <ul class="thumb">
         <li><img src="thumb01.png"></li>
         <li><img src="thumb02.png"></li>
         <li><img src="thumb03.png"></li>
     </ul>
</div>

スライダーとサムネイルの要素の数を合わせれば連動完了です。

サムネイルのリストは動的にアクティブになった要素に「flex-active」クラスが追加されて下記のようになります。
<li class=”flex-active”><img src=”thumb01.png”></li>

ということで.flex-activeクラスを使えば、アクティブになった時のサムネイルのスタイルを作ることができます。こんな感じでオリジナルスタイルのカルーセルを作成することができます。

 

 - jQuery

  • このエントリーをはてなブックマークに追加

  関連記事

スクロールバーをかっこよくデザインする

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …

jScrollPaneをレスポンシブ対応する

スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …

ページ内リンクをスムーズスクロール

サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …

flexslider2のカルーセルをレスポンシブ対応する

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …

スクロールしたときに画像を読み込むことでページの表示を高速化させる

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …