[jQuery]サムネイル画像をカルーセル表示出来る 軽量スライダー FlexSlider.js

公開日:  最終更新日:2018/12/22

[jQuery]サムネイル部分をカルーセル表示出来る 軽量スライダー FlexSlider.js
コメントを頂くことが多いので追加でサンプルを紹介したいと思います。

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

以前の記事

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

スポンサードリンク

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

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

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

ダウンロードしたファイルの中の「jquery.flexslider.js」「flexslider.css」の2つのファイル、「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行目 ダウンロードした3つのファイルを読み込みんでいます。
(サーバー内にアップするのを忘れないでください。また、パスも環境に合わせて変更してください)

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

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

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

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

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

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

動作サンプル(サムネイルもスライダー表示)


メインのスライダー画像にたくさんの画像を表示する場合は、サムネイル部分が場所を取ってしまいますが、この表示方法であれば場所もとらずに、表示することが出来そうですね。
<>の画像がうまく表示されない対応方法については、↓↓の記事に追記しています)

他のスライダー








Comment

  1. toshi より:

    すみません。
    こちらのサイトを参考にしてflexsliderを導入できたんですが、
    IEやfireFOXなどパソコンでは表示されるのに、スマホでは画像が表示されません。矢印だけ表示されるので一応動いているとは思うのですが・・・

    解決方法をご存じでしたらご教授お願いいたします

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑