レスポンシブ対応のスライダーの作り方
今回は、html/CSS/JavascriptやjQueryを勉強し始めた方でも使える、レスポンシブ対応のjQueryプラグインを使ってスライダーを作ってみます。
0.スライダーのメリットとデメリット
多くのサイトで目にするスライダー。多くの情報を省スペースで表示でき、動きがつくことでサイトの見た目も華やかになりますね。
一方で、サイトが重くなることや、場合によってはCVRには貢献しないということも言及されています。
参考：IMJモバイル、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を発表
スライダーを利用すべきかどうかの見極めも重要です。
1.プラグイン
レスポンシブ対応のjQueryプラグインは、Web上に非常にたくさん公開されています。
参考：レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin
モバイルファーストマーケティングラボでも、bxsliderというプラグインを使ったスライドショーの作り方を紹介しています。
bxsliderのサムネイル画像枚数を自由に変更できるようにする方法
今回は、Flexslider2というプラグインを用いて、スライダーを作ってみます。
2. 作り方
では、スライダーを作っていきます。
①jqueryライブラリとプラグインを埋め込み
ダウンロードしたスタイルシート、jqueryライブラリ（またはCDN）、プラグインを読ませます。
コード
<link rel="stylesheet" href="flexslider.css" type="text/css" /> <!-- ダウンロードしたスタイルシートを読み込みます。--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!--JQueryライブラリを読み込みます。--> <script src="jquery.flexslider.js"></script><!--Flexslider2のプラグインを読み込みます。-->
このとき、プラグインと一緒にダウンロードした、fontフォルダ（アイコンのファイル入り）も、htmlファイルと同じ階層においておけば、スライダーのアイコンもそのまま使うことができます。
②listタグで画像を配置
画像を置きます。
<div class="flexslider"> <ul class="slides"> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> </ul> </div>
③スクリプトを書く
head内にスクリプトを記述します。
<script>
$(window).load(function() {
$('.flexslider').flexslider({
});
});
</script>
④オプション
スライドショーの速さ、動きやレイアウトなどを変えたいときは、上記スプリクト内にオプションを記述します。
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide", <!--ここにオプションを記入-->
controlNav: "thumbnails"});
});
</script>
参考：flexslider-Jqueryスライダーの使い方とオプション日本語訳。レスポンシブ、フリックスライドにも対応 | 焦点
⑤スライダーの大きさや位置を編集
スライダーの大きさや位置は、通常通りCSSを適用します。
<style>
.flexslider{width:600px;}
</style>
ここまでの工程でできたものが、下記デモサイトです。
デモサイト
3.おわりに
レスポンシブECサイトASP「aishipR」を利用したサイトでも、多くのサイトでスライダーを利用していただいています。下記より、ぜひご覧ください
黒河
