flexsliderのmanualControlsを使ってサムネイルと連動させる
2015/08/19
便利で有名なjqueryのスライダープラグインflexsliderですが、manualControlsオプションを使ってサムネイルと連動させる方法をメモ。
controlNavオプションやカルーセル(sync、asNavForオプション)を使ったときはレイアウトが自由に簡単にカスタマイズできません。
↑勝手にサムネイル画像の効果がつく。カスタマイズは本体の解析が必要。
WordPressの初心者が独学でホームページ作成したときの技術メモ
2015/08/19
便利で有名なjqueryのスライダープラグインflexsliderですが、manualControlsオプションを使ってサムネイルと連動させる方法をメモ。
controlNavオプションやカルーセル(sync、asNavForオプション)を使ったときはレイアウトが自由に簡単にカスタマイズできません。
↑勝手にサムネイル画像の効果がつく。カスタマイズは本体の解析が必要。
サンプルコードです。
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クラスを使えば、アクティブになった時のサムネイルのスタイルを作ることができます。こんな感じでオリジナルスタイルのカルーセルを作成することができます。
新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …
スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …
サイト内を滑らかにスクロールさせます。 ほぼ必ずサイトの右下などに「Topへ戻る …
カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …
スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …