【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブ対応JQueryプラグインでスライダー入門!

レスポンシブ対応JQueryプラグインでスライダー入門!

レスポンシブ対応のスライダーの作り方

今回は、html/CSS/JavascriptやjQueryを勉強し始めた方でも使える、レスポンシブ対応のjQueryプラグインを使ってスライダーを作ってみます。

0.スライダーのメリットとデメリット

多くのサイトで目にするスライダー。多くの情報を省スペースで表示でき、動きがつくことでサイトの見た目も華やかになりますね。

一方で、サイトが重くなることや、場合によってはCVRには貢献しないということも言及されています。

参考:IMJモバイル、「スマートフォンサイトの情報表示方法に関するユーザビリティ調査」を発表

スライダーを利用すべきかどうかの見極めも重要です。

1.プラグイン

レスポンシブ対応のjQueryプラグインは、Web上に非常にたくさん公開されています。

参考:レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin

モバイルファーストマーケティングラボでも、bxsliderというプラグインを使ったスライドショーの作り方を紹介しています。

bxsliderのサムネイル画像枚数を自由に変更できるようにする方法

今回は、Flexslider2というプラグインを用いて、スライダーを作ってみます。

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」を利用したサイトでも、多くのサイトでスライダーを利用していただいています。下記より、ぜひご覧ください

レスポンシブECサイト事例

黒河

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+