Getting Started

更新日: 2018-09-21

1. HTML作成

HTMLを用意します。

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

2. slickを設置

slickをダウンロードして解凍します。解凍したディレクトリ内にあるslickディレクトリをプロジェクトに移動します。

3. slick.cssを追加

<head>にslick.cssを追加します。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

4. jQuery、slick.jsを追加

</body>の直前にjQuery(v1.7以上)とslick.jsを追加します。 slick.jsはjQueryの後に追加してください。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

5. sliderを初期化

インラインスクリプトまたは、JSファイル内でsliderを初期化します。

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

完了

最終的にHTMLは以下のようになります。

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

* 初期化スクリプトは外部スクリプトとして用意することをおすすめします。

デモ

上記の内容とほぼ同じ指定で実行します。スワイプで左右にスライドすることができます。

* 上記例との違いはslickのオプションを指定していない点と、ボックスのスタイルを指定している点です。

your content 1

your content 2

your content 3

JavaScript

$(document).ready(function(){
  $('.your-class').slick();
});

HTML

<div class="your-class">
  <div>your content 1</div>
  <div>your content 2</div>
  <div>your content 3</div>
</div>

CSS

.your-class {
  padding: .5em 1em;
  background-color: #e0e0e0
}

このコンテンツはKen Wheeler(kenwheeler)によるslickドキュメントを翻訳/改変したものです。