[JS]レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」
スポンサード
以下のページより、Flex Slider のファイルを一式ダウンロードします。
基本的なスライドのデモ
サムネイル表示のスライドのデモ
カルーセルのスライドサンプルはこちら↓に用意しています。
カルーセルのスライドのデモ
サムネイルのスライドサンプルはこちら↓。
サムネイルのスライドデモ
スポンサード
スライドショーのjQuery プラグインは山ほどありますが、FlexSlider はレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。
また、カルーセルが使えるなどカスタマイズ性にも優れており、非常に使い勝手がよいプラグインだと思います。
目次
Flex Slider ファイルのダウンロード
以下のページより、Flex Slider のファイルを一式ダウンロードします。
Flex Slider の設置
ダウンロードした jquery.flexslider.js、flexslider.css のファイルを、jquery ファイルと一緒に設置します。<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 の基本的な使い方からご紹介します。<script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", }); }); </script>スライドを適用させたいエリアに
flexslider
クラスを、スライドさせる画像やコンテンツの親要素に slides
を付けます。<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"
を利用して、サムネイルを表示させることがでます。<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); </script>スライドさせる画像やコンテンツには、
data-thumb="画像パス"
でサムネイル画像(のパス)を指定します。<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 では、スライダーの他にもカルーセルを利用することができます。<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false, itemWidth: 210, itemMargin: 5 }); }); </script>
itemWidth: 210
で画像の表示幅を指定します。<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枚が収まります。カルーセルのスライドサンプルはこちら↓に用意しています。
カルーセルのスライドのデモ
サムネイルにもスライダーを付ける
先に紹介したサムネイルにもカルーセルを利用して、スライダーとして動かす方法です。<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>
<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>ここまで紹介させていただいた「スライド」と「カルーセル」の複合技です。
サムネイルのスライドサンプルはこちら↓。
サムネイルのスライドデモ
スポンサード
コメント