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

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

[サンプルソース有り][jQuery]画像の切り替えに使える軽量スライダー FlexSlider.js
ショップの目立つ位置で大きなバナー画像が自動で切り替わって表示されているのを見かけたことありますよね。

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

スポンサードリンク

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

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

(↓↓は画像なのでわかりにくいですが・・・)
楽天 爽快ドラッグのスライドバナーイメージ
他にも、
コスメランド
ショップオブザイヤー2012で「コスメ・香水」ジャンル大賞受賞ショップ

こちらも、トップの最初に表示した中央エリアで画像が切り替わる仕組みが使われてますね。
楽天コスメランドのスライドバナーのイメージ
上記のショップ以外でもトップのメインエリア付近で大きめの画像を自動切換えたり、もしくは、マウスクリックで表示切替の仕組みをよく見かけますね。

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

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

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。
ダウンロードしたファイルの中の
「jquery.flexslider.js」「flexslider.css」の2つのファイル
「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">イメージ1の説明</p>
</li>
<li>
<img src="画像URL">
<p class="flex-caption">イメージ2の説明</p>
</li>
<li>
<img src="画像URL">
<p class="flex-caption">イメージ3の説明</p>
</li>
<li>
<img src="画像URL">
<p class="flex-caption">イメージ4の説明</p>
</li>
<li>
<img src="画像URL">
<p class="flex-caption">イメージ5の説明</p>
</li>
</ul>
</div>

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

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

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

もちろん<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


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

スライダーの動作サンプル


お客の目を引く場所に、設置して色々アピールしたいですね。
ぜひ、活用してみてください。

また、本日紹介したスライダーは使い勝手が非常に良いみたいなので
後日、また別のサンプルも紹介しようと思います。

追記:↓↓別サンプル




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑