サムネイルをカルーセル表示-軽量スライダー FlexSlider.js

公開日：2013/09/23 最終更新日：2021/11/30

jQuery カルーセルサムネイルサンプルソーススライダー

コメントを頂くことが多いので追加でサンプルを紹介したいと思います。

以前紹介した内容にサムネイル表示するサンプルがありましたが、画像の数が増えていくとサムネイル表示部分が2行、3行と表示される仕組だったので画像数が多い場合は意外と場所を取ってしまいます。

以前の記事

ネットショップ運営の気になる備忘録

[jQuery]FlexSlider.jsサムネイル、カルーセル対応の軽量スライダー

そこで本日は、同じスライダーを画像が多い場合でも省スペースに表示可能にするサムネイル画像が表示される部分をカルーセル表示するサンプルを紹介します。

実装方法について(サムネイル部分をカルーセル表示)「FlexSlider.js」

重複する内容になりますが、念のため書きますね。下記より必要ファイルをダウンロードしてください。

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。

ダウンロードしたファイルの中の「jquery.flexslider.js」「flexslider.css」の２つのファイル、「images」フォルダとその中の画像を使用します。
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

サンプルソース(サムネイル表示） sample1.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">
$(window).load(function() {
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 200,
    itemMargin: 0,
    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="メイン画像URL1">
    </li>
    <li>
      <img src="メイン画像URL2">
    </li>
    <li>
      <img src="メイン画像URL3">
    </li>
    <li>
      <img src="メイン画像URL4">
    </li>
    <li>
      <img src="メイン画像URL5">
    </li>   
  </ul>
</div>
 
<!-- サムネイル画像を設定 -->
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="サムネイル画像URL1">
    </li>
    <li>
      <img src="サムネイル画像URL2">
    </li>
    <li>
      <img src="サムネイル画像URL3">
    </li>
    <li>
      <img src="サムネイル画像URL4">
    </li>
    <li>
      <img src="サムネイル画像URL5">
    </li>    
  </ul>
</div>

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

4～24行目でスライダーの設定、実行をしている部分になります。
ここで、動き、表示等の設定をすることが出来ます。
ポイントはメイン画像スライダー部分とサムネイル画像部分を別々に設定しているところです。

htmlの記述部分も、メイン画像エリアとサムネイル画像エリアが別々に記述します。

＜div id=”slider” ・・・・＜/div＞がメイン画像
＜div id=”carousel” ・・・・＜/div＞がカルーセル画像
をそれぞれ指定しています。

サンプルソースでは、５つ画像を指定してますが、最大12個まで追加で設定することが出来ます。（必要な数だけ＜li＞＜img src=””＞＜/li＞を設定します）

また、メイン画像から別ページなどへのリンクが必要な場合は、リンク設定をすることも可能
サムネイルもメイン画像の数に合わせて設定します。

画像は自動的に縮小表示してくれるので、メイン画像と同じURLでも問題ないかと思います。（縮小した表示が気になる場合は、別画像を準備）