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

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

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

jQueryライブラリ「slick」を使ったレスポンシブなスライダーの導入方法

jQueryライブラリ「slick」を使ったレスポンシブなスライダーの導入方法

セール情報などのお知らせを表示するために、自社サイトにスライダーを表示させたいという方は多いかと思います。

スライダーを実装するためのライブラリには様々なものがありますが、今回は、簡単にレスポンシブ表示のできる人気のプラグイン「slick」を使ったスライダーの実装をご紹介します。

まずは以下のURLへ行き、「get it now」→「Download Now」をクリックして、slickをローカルにダウンロードしていきます。(cdnでも可)

https : //kenwheeler.github.io/slick/

ダウンロードしたフォルダーから「slick」という名前のフォルダを、表示させたいhtmlファイルが入ったフォルダに移動させます。

次にhtmlファイルを変更していきます。

<html>
  <head>
    <title>Responsive Slider</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>
    <section class="next slider">
      <div><img src="img/sample1.png"></div> 
      <div><img src="img/sample2.png"></div> 
      <div><img src="img/sample3.png"></div> 
      <div><img src="img/sample4.png"></div> 
      <div><img src="img/sample5.png"></div> 
      <div><img src="img/sample6.png"></div> 
    </section>
    <script src="https : //code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
  </body>
</html>
<style>
  html, body {
    margin :  0;
    padding :  0;
  }

  * {
    box-sizing :  border-box;
  }

  .slider {
      width :  50%;
      margin :  100px auto;
  }

  .slick-slide {
    margin :  0px 20px;
    height : auto;
  }

  .slick-slide img {
    width :  100%;
  }

  .slick-prev : before,
  .slick-next : before {
    color :  black;
  }


  .slick-slide {
    transition :  all ease-in-out .3s;
    opacity :  .2;
  }

  .slick-active {
    opacity :  .5;
  }

  .slick-current {
    opacity :  1;
  }
</style>

これでslickの設定は完了です。ヘッダーの中で、先ほどダウンロードしたslickフォルダの中のCSSコードとリンクさせ、bodyタグの直前で、jQueryを読み込み、JSコードとリンクさせています。

スライダーに画像を使う場合はimgタグを並べ、その他の場合はdivタグなどを並べ、任意のクラスを指定した箱を作ります。(sectionでなくても構いません)

styleタグで囲んだCSSコードはなくても構いませんが、スライダーに指定する画像サイズによっては、レスポンシブの表示が崩れることがあるので、

.slick-slide {
    height : auto;
  }

は設定しておきましょう。

次に、実際にslickを使ってスライダーを表示させるために、bodyタグの直前に次のjsコードを挿入します。

<script type="text/javascript">
$(document).on('ready', function() {
$('.next').slick({
      slidesToShow :  1,
      slidesToScroll :  1,
      dots :  true,
      centerMode :  true,
      focusOnSelect :  true
});
});
</script>

スライダーに使用する画像が入ったタグに指定したクラス名(ここではnext)をJS内で呼び出し、スライダーの表示に関わる設定をしています。

また、スライダーの主な設定項目は以下のようになっています。

dots : true/false ドットのナビを表示/非表示
slidesToShow : 1 表示スライド数
autoplay : true/false スライドの自動再生
autoplaySpeed : 2000 自動再生の速さ(ms)
arrows : true/false 矢印のナビを表示/非表示
speed : 300 スライドの速さ(ms)
infinite : true/false 最後のスライドの次に最初のスライドを表示する/最後のスライダーでスライドを止める
fade : true/false スライドのフェード表示
centerMode : true/false 前後のスライドの表示

先ほどのJSコードで作成したスライダーは次のようなものになります。

また、このJSコードを改変するだけで、様々なスライダーを作成することが可能になります。
いくつか、サンプルもご紹介しておきます。

サンプル1(autoplay)

JSコード

<script type="text/javascript">
$(document).on('ready', function() {
$('.autoplay').slick({
      slidesToShow :  3,
      slidesToScroll :  1,
      autoplay :  true,
      autoplaySpeed :  2000,
    });
});
</script>
サンプル2(slider-for & nav)

JSコード

<script type="text/javascript">
$(document).on('ready', function() {
$('.slider-for').slick({
     slidesToShow :  1,
     slidesToScroll :  1,
     arrows :  false,
     fade :  true,
     asNavFor :  '.slider-nav'
    });
$('.slider-nav').slick({
      slidesToShow :  3,
      slidesToScroll :  1,
      asNavFor :  '.slider-for',
      dots :  true,
      centerMode :  true,
      focusOnSelect :  true
    });
});
</script>
サンプル3(one-time)

JSコード

<script type="text/javascript">
$(document).on('ready', function() {
$('.one-time').slick({
      dots :  true,
      infinite :  true,
      speed :  300,
      slidesToShow :  1,
      adaptiveHeight :  true
    });
});
</script>
サンプル4(fade)

JSコード

<script type="text/javascript">
$(document).on('ready', function() {
$('.fade').slick({
      dots :  true,
      infinite :  true,
      speed :  500,
      fade :  true,
      cssEase :  'linear'
    });
});
</script>
サンプル5(vertical-center)

JSコード

<script type="text/javascript">
$(document).on('ready', function() {
$(".vertical-center").slick({
  dots :  true,
  vertical :  true,
  centerMode :  true,
});
});
</script>

ぜひこれらのサンプルも参考にしつつ、サイトにあったスライダーを作ってみてください。

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

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

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

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。