More than 5 years have passed since last update.

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

Last updated at 2020-01-29Posted at 2019-06-15

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

公式ページからダウンロード

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>

センターモード

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>

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

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>

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

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時の色を変更 */
}

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

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

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");
}

<!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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up