FlexSlider.js画像の切り替えに使える軽量スライダー「jQuery」

公開日：2013/07/17 最終更新日：2022/08/27

ショップの目立つ位置で大きなバナー画像が自動で切り替わって表示されているのを見かけたことありますよね。最近では多くのショップがトップページのヘッダー部分等に設置しています。

ページを開いた最初にされるエリアに配置してあることが多く必ず目に入る部分ですし、そこにおすすめの大きなバナーを表示して目を引くスライダーは楽天ショップに限らず、ECサイトではよく使われている表示方法で限られたスペースに複数のバナーを配置することも可能になります。

ネットショップのメイン画像を飾るスライダーを設置しよう

例えば、こちらのショップ爽快ドラッグ
ショップオブザイヤー2012で総合１位を受賞しているショップ
↓↓↓のエリアを見てもらうと大きめのメイン画像がスライドして入れ替わっています。

(↓↓は画像なのでわかりにくいですが・・・）

他にも、
コスメランド
ショップオブザイヤー2012で「コスメ・香水」ジャンル大賞受賞ショップ

こちらも、トップの最初に表示した中央エリアで画像が切り替わる仕組みが使われてますね。

上記のショップ以外でもトップのメインエリア付近で大きめの画像を自動切換えたり、もしくは、マウスクリックで表示切替の仕組みをよく見かけますね。

本日は、これと同じような動きを実装する方法を調べてみました。
色々な方法がありましたが、シンプルな記述なものを選択しています。

スライダーの実装方法について

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。
ダウンロードしたファイルの中の
「jquery.flexslider.js」「flexslider.css」の２つのファイル
「images」フォルダとその中の画像を使用します。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

スライダーのサンプルソースについて

サンプルソース sample.html

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "fade",          //切り替え動作 fade or slide
    slideshow: true,            //自動実行 true or false
    slideshowSpeed: 5000,  //スライドショーの時間　1000 = 1秒
    animationDuration: 500, //アニメーション時間　1000 = 1秒
    controlNav: true         //ページングナビボタン　true or false
  });
});
</script>
 
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="画像URL">
      <p class="flex-caption">イメージ１の説明</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">イメージ２の説明</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">イメージ３の説明</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">イメージ４の説明</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">イメージ５の説明</p>
    </li>
  </ul>
</div>

1、2、3行目ダウンロードした３つのファイルを読み込みんでいます。
(GOLD内にアップするのを忘れないでください。また、パスも環境に合わせて変更してください)

4～14行目でスライダーの設定、実行をしている部分になります。
ここで、動き、表示等の設定をすることが出来ます。
設定については↓↓でまとめて書きます。

16行目から39行目で切り替えて表示したい画像などを記述しています。
＜ul class=”slides”> ・・・・内に
表示したい数だけ＜li＞＜/li＞を記述します。
このサンプルでは５つ記述してますので
５つの同サイズ画像を事前に準備しておきます。

もちろん＜li＞＜/li＞内の画像に対してリンクタグも設定することも出来ます。

＜p class=”flex-caption”＞は、画像↓に説明文を表示する場合に使います。
説明が不要な場合は削除しても問題ありません。
また、動き、表示設定でよく使いそうな内容としては

animation: “fade”, //切替方法　fade or slide
slideshow: true, //自動再生　true or false
slideshowSpeed: 7000, //スライドショー時間　1000 = 1秒
animationDuration: 500, //アニメーション時間　1000 = 1秒
directionNav: true, //ナビボタン表示　true or false
controlNav: true, //ページングナビ表示　true or false
keyboardNav: true, //キーボードナビ　true or false
pauseOnAction: true, //アクション時にストップ　true or false
pauseOnHover: false, //マウスオーバー時にストップ　true or false

などが出来るみたいです。詳しくは公式サイトを確認してみてください。