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

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

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

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

【レスポンシブ対応】高機能なスライダーが作成できる「slick」

【レスポンシブ対応】高機能なスライダーが作成できる「slick」

今回はslickというスライダー実装のためのjQueryプラグインをご紹介します。

サイト制作の現場ではスライダー(カルーセル)の実装といえばbxsliderがまっさきに思い浮かぶと思います。導入事例も多く様々なバリエーションで展開されているので、気軽に導入できるので人気です。

しかしより高機能で簡単に実装できる、「slick」というプラグインがありましたので、今回は特徴や実装方法についてご紹介します。

slickのデモはこちらから

slickの特徴

slickは大きく次のような特徴をそなえています。

  • レスポンシブ対応
  • ブレークポイントごとにスライダーのレイアウトや設定を変えられる
  • CSS3対応
  • スワイプ・マウスドラッグでのスライド操作可能
  • 矢印ボタンクリックでのスライド操作可能
  • 自動再生・フェードなど多様な見せ方が可能

slick実装に必要なファイル

公式サイトのget it nowのよりダウンロード可能です。ファイルが色々とありますが、動かすのに必要なのはjQueryソースコード、slick用のcss(2つ)とJavascript、矢印ボタンなどフォントが入ったfontsフォルダとなります。

  • jquery.js
  • slick.css
  • slick-theme.css
  • slick.js
  • fonts(フォルダ)

今回は楽に記述するためスライダー画像を記述するHTMLのヘッダ内で上記4つのソースをCDNで読込み、fontsフォルダをHTMLと同階層に配置しての実装方法を紹介します。※fontsフォルダ内のファイルはslick-theme.css上で読み込まれます。

【HTML】head内の記述

head内ではCDNでslick.css/slick-theme.css/jquery-2.2.0.min.js/slick.min.jsの4つを読込みます。CDN記述の順番を間違えると正常に動作しないのでご注意ください。styleタグ内では、デモ用にスタイルを調整しています。

<head>
  <title>Slick Demo</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

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

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

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

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  </style>
</head>
</head>

【HTML】body内の記述

body内ではスライダーのコンテンツ(画像)と、スライダーのレイアウトおよび動作設定のためのJSを記述していきます。

<!--スライダーのコンテンツ(画像)を記述-->
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
  </section>

<!--スライダーのレイアウト・動作設定を記述-->
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        autoplay: true,//自動再生あり
        autoplaySpeed: 2000,//自動再生でのスライダー切替スピード2000ms(2秒)
      });
    });
  </script>

終わりに

実際にデモページで右クリックして「ページのソースを表示」からソースを御覧ください。ソース量の少なさと実装のしやすさを実感されるかと思います。slickのバリエーションも豊富にありますので、色々と試してみてください。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+