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

公開日:  最終更新日:2015/12/10

[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でも問題ないかと思います。(縮小した表示が気になる場合は、別画像を準備)

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


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

他のスライダー




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Comment

  1. toshi より:

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

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

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑