スポンサード

スライドショーの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>

ここまで紹介させていただいた「スライド」と「カルーセル」の複合技です。


サムネイルのスライドサンプルはこちら↓。
サムネイルのスライドデモ

スポンサード