フレキシブルな FlexSlider2 で、スライダーとカルーセルを連係動作させてみる （サムネイル付きスライダーとして表示）
投稿： 更新：2019/12/24
FlexSlider2 スライダーの設置等について
スライド時のアニメーションの種類はありませんが、レスポンシブに使えるスライダーとしては、おすすめのスライダーです。
スライダーは、他にも数多くありますが、フレキシブルで動作するものとしては、これがベストだと思います。カスタマイズの幅も広く、動画のスライドやカルーセルとしても使用できるので、重宝すること間違いなし。
ということで、設置してみたいと思います。
FlexSlider2 ファイルのダウンロード
必要なファイルを、以下からダウンロードします。
WOO THEMES FlexSlider2
http://flexslider.woothemes.com
FlexSlider2 マークアップ
jQueryの読み込みを忘れずに。もちろん、ワードプレスでも動作します。
ヘッダー
|
1 2 |
<link rel="stylesheet" href="flexslider.css" type="text/css" /> <script src="jquery.flexslider.js"></script> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> //メインにするスライダー jQuery('#slider').flexslider({ animation: 'fade', controlNav: false, animationLoop: false, slideshow: false, sync: '#carousel'//連携させるカルーセル }); //カルーセル（サムネイル） jQuery('#carousel').flexslider({ animation: 'slide',//スライドのアニメーション controlNav: false,//ページャー animationLoop: false,//ループ表示 slideshow: false,//AUTOスライド itemWidth: 107,//スライドの幅 minItems:4,//スライドの最小表示数 maxItems:5,//スライドの最大表示数 move:5,//一度にスライドする数 asNavFor: '#slider'//連携させるスライダー }); </script> |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="slider"> <ul class="slides"> <li><img src="image1.jpg" /></li> <li><img src="image2.jpg" /></li> <li><img src="image3.jpg" /></li> <li><img src="image4.jpg" /></li> </ul> </div> <div id="carousel"> <ul class="slides"> <li><img src="image1.jpg" /></li> <li><img src="image2.jpg" /></li> <li><img src="image3.jpg" /></li> <li><img src="image4.jpg" /></li> </ul> </div> |
一家に一台！？ FlexSlider… 。