記事の内容やaishipシリーズに関するお問い合わせはこちらから

問合せフォーム

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

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サイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20å¹´


    EC支援歴

お問い合わせ 資料請求
         

レスポンシブWebデザインカテゴリの最新記事