スライドショーのjQuery プラグインは山ほどありますがFlexSliderはレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。
また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
Flex Sliderファイルのダウンロード
![[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」](https://webantena.net/wp-content/uploads/2012/10/flexslider01.png)
以下のページよりFlex Sliderのファイルを一式ダウンロードします。
FlexSlider
Flex Sliderの設置
ダウンロードしたjquery.flexslider.js、flexslider.cssのファイルを、jqueryファイルと一緒に設置します。|
1 2 3 4 5 6 7 8 9 10 |
<link rel="stylesheet" href="./flexslider/flexslider.css" /> <script src="./jquery.min.js"></script> <script src="./flexslider/jquery.flexslider.js"></script> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", }); }); </script> |
画像も使用しますので、flexslider/のようにまとめてファイルをアップすると良いかと思います。
FlexSliderの基本的な使い方
まずはFlexSliderの基本的な使い方からご紹介します。|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", }); }); </script> |
スライドを適用させたいエリアにflexsliderクラスを、スライドさせる画像やコンテンツの親要素にslidesを付けます。
|
1 2 3 4 5 6 7 8 |
<div class="flexslider"> <ul class="slides"> <li><img src="slide1.jpg" /></li> <li><img src="slide2.jpg" /></li> <li><img src="slide3.jpg" /></li> <li><img src="slide4.jpg" /></li> </ul> </div> |
基本的なスライドのサンプルはこちら↓に掲載しています。
基本的なスライドのデモ
サムネイルを表示する
オプションでcontrolNav:"thumbnails"を利用して、サムネイルを表示させることがでます。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); </script> |
スライドさせる画像やコンテンツには、data-thumb="画像パス"でサムネイル画像（のパス）を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="flexslider"> <ul class="slides"> <li data-thumb="./images/flexslider01_s.jpg"> <img src="./images/flexslider01.jpg" /></li> <li data-thumb="./images/flexslider02_s.jpg"> <img src="./images/flexslider02.jpg" /></li> <li data-thumb="./images/flexslider03_s.jpg"> <img src="./images/flexslider03.jpg" /></li> <li data-thumb="./images/flexslider04_s.jpg"> <img src="./images/flexslider04.jpg" /></li> </ul> </div> |
サムネイル表示のスライドサンプルはこちら↓です。
サムネイル表示のスライドのデモ
Carousel（カルーセル）を利用する
FlexSlider 2では、スライダーの他にもカルーセルを利用することができます。|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 210, itemMargin: 5 }); }); </script> |
itemWidth: 210で画像の表示幅を指定します。
|
1 2 3 4 5 6 7 8 |
<div class="flexslider"> <ul class="slides"> <li><img src="./images/flexslider01.jpg" /></li> <li><img src="./images/flexslider02.jpg" /></li> <li><img src="./images/flexslider03.jpg" /></li> <li><img src="./images/flexslider04.jpg" /></li> </ul> </div> |
画像の幅が420pxの場合はitemWidth: 210と指定することで、ファーストビューでキレイに画像2枚が収まります。
![[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」](https://webantena.net/wp-content/uploads/2013/01/flexslider03.png)
カルーセルのスライドサンプルはこちら↓に用意しています。
カルーセルのスライドのデモ
サムネイルにもスライダーを付ける
先に紹介したサムネイルにもカルーセルを利用して、スライダーとして動かす方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(window).load(function() { $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth: 210, itemMargin: 5, asNavFor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel" }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="slider" class="flexslider"> <ul class="slides"> <li><img src="./images/flexslider01.jpg" /></li> <li><img src="./images/flexslider02.jpg" /></li> <li><img src="./images/flexslider03.jpg" /></li> <li><img src="./images/flexslider04.jpg" /></li> </ul> </div> <div id="carousel" class="flexslider"> <ul class="slides"> <li><img src="./images/flexslider01.jpg" /></li> <li><img src="./images/flexslider02.jpg" /></li> <li><img src="./images/flexslider03.jpg" /></li> <li><img src="./images/flexslider04.jpg" /></li> </ul> </div> |
ここまで紹介させていただいた「スライド」と「カルーセル」の複合技です。
![[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」](https://webantena.net/wp-content/uploads/2013/01/flexslider04.png)
サムネイルのスライドサンプルはこちら↓。
サムネイルのスライドデモ
コメント