【Slick】よく実装するスライダーのテンプレ

よく使うsliderのテンプレをメモとして残しておきます。

## 公式ページからダウンロード
https://kenwheeler.github.io/slick/

## linkとscriptタグの設置 
headタグ内

```index.html
  <link rel="stylesheet" href="css/slick-theme.css" type="text/css">
  <link rel="stylesheet" href="css/slick.css" type="text/css">
```

bodyタグ内

```index.html
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/slick.min.js" type="text/javascript"></script>
```

## センターモード

![screencapture-127-0-0-1-5500-index-html-2019-09-08-15_12_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298333/2c6d268f-1b77-582a-3ca4-5824d8c6041a.png)


```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Slick Slider</title>
  <link rel="stylesheet" href="css/slick-theme.css" type="text/css">
  <link rel="stylesheet" href="css/slick.css" type="text/css">
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 100%;
    margin: 0 auto;
  }
  .slick-slide img {
    width: 100%;  /* widht100%を指定することにより、画像間の無駄な余白が消える */
  }
  .slick-slide {
    margin: 0 10px 0;
  }
  .slick-slide:not(.slick-center) {
    opacity: 0.5;
  }
  </style>
</head>
<body>
  <div class="header_slider">
    <ul class="slider">
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/slick.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $('.slider').slick({
    infinite: true, // 無限スクロール
    centerMode: true,
    autoplay:true,
    dots:true,
  });
  </script>
</body>
</html>
```

## センターモード（矢印画像追加）

![screencapture-127-0-0-1-5500-index-html-2019-09-08-15_15_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298333/16bab405-dddb-a95d-db70-380c4665b124.png)


```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Slick Slider</title>
  <link rel="stylesheet" href="css/slick-theme.css" type="text/css">
  <link rel="stylesheet" href="css/slick.css" type="text/css">
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 100%;
    margin: 0 auto;
  }
  .slick-slide img {
    width: 100%; 
  }
  .slick-slide {
    margin: 0 10px 0; /* centerPaddingで左右の見える幅を指定してもOK */
  }
  .slick-slide:not(.slick-center) {
    opacity: 0.5;
  }

  .slick-arrow {
    z-index:20; /* 矢印画像を最前面へ */
  }
  .slide-arrow{
    position: absolute;
    top: 40%;
  }
  .prev-arrow{
    left: 30px;
  }
  .next-arrow{
    right: 30px;
  }
  </style>
</head>
<body>
  <div class="header_slider">
    <ul class="slider">
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
        <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/slick.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $('.slider').slick({
    infinite: true, // 無限スクロール
    centerMode: true,
    autoplay:true,
    prevArrow: '<div class="slide-arrow prev-arrow"><img src="img/arrow_left.png"></div>',
    nextArrow: '<div class="slide-arrow next-arrow"><img src="img/arrow_right.png"></div>'
  });
  </script>
</body>
</html>
```

## センターモード（ドットサイズ変更）

![screencapture-127-0-0-1-5500-index-html-2019-09-08-16_04_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298333/6b631b47-1e6b-5e4e-7309-1339e88a1730.png)


`dots:true`を追加し、`slick-theme.css`をいじる

```slick-theme.css
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
    color: green; /* hover時の色を変更 */
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    /* 元のcontentプロパティの値だとfont-sizeを変更した際に位置がずれてしまうので値を変更 */
    /* content: '•'; */
    content: '●';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: green; /* active時の色を変更 */
}
```

## ドット部分を他の画像に置き換える

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298333/f3594d40-8aa0-351c-cc5f-42ae8ba8f4b4.gif)



ドット部分の変更箇所は以下のような感じ

<br>

```slick-theme.css
.slick-dots li {
    /* width: 20px; */
    width: 210px; 
}

(中略)

.slick-dots li button:before {
    /* content: '•'; */
    content: url("../images/black_line.png");
}
.slick-dots li.slick-active button:before
{
    /* opacity: .75;
    color: black; */
    content: url("../images/pink_line.png");
}
```

<img width="792" alt="スクリーンショット 2019-11-04 10.39.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298333/e6abb5e5-340e-efff-8983-49cda894dc74.png">

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Slider</title>
  <link rel="stylesheet" href="css/slick-theme.css" type="text/css">
  <link rel="stylesheet" href="css/slick.css" type="text/css">
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 100%;
    margin: 0 auto;
  }
  .slick-slide img {
    width: 100%;
  }
  .slick-slide {
    margin: 0;
  }
  .slick-slide:not(.slick-center) {
    opacity: 0.5;
  }
  .header_slider .thumb {
    width: 90%;
    margin: 0 auto;
  }
  .header_slider .thumb li {
    margin-right: 20px;
  }
  </style>
</head>
<body>
<div class="header_slider">
  <ul class="slider">
      <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
      <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
      <li><a href="#"><img src="img/800x600.png" alt=""></a></li>
  </ul>
  <ul class="thumb">
      <li><a href="#"><img src="img/800x100.png"></a></li>
      <li><a href="#"><img src="img/800x100.png"></a></li>
      <li><a href="#"><img src="img/800x100.png"></a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $('.slider').slick({
    infinite: true, // 無限スクロール
    centerMode: true,
    autoplay:true,
    dots:true,
  });
  $('.thumb').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider', //スライダー本体のクラス名
    focusOnSelect: true,
  });
</script>
</body>
</html>
```