「Slick.js」を使ってスライダーを挿入できる17つの即席コード

「Slick.js」を使ってスライダーを挿入できる17つの即席コード

slick.jsを使って実現できるスライダーの即席コード集を提供しています。

スライダーを簡単に導入できる「Slick.js」

Slick.jsを使用すれば、簡単にサイトにスライダーを導入することができます。しかし、使い方を知らないと意外と実装めんどうですし、覚えてもその後使うことが無かったりするので、簡単に導入できるように即席コードをまとめておきました。

導入

必要なソースの読み込みです。BootstrapとかjQueryは利便性を考えて入れているだけなので、臨機応変に対応願います。

CSS

html
<!--必要な人だけ-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<!--必要な人だけ-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--必要な人だけ-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!--必要な人だけ-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

コード集 基本編

1:デフォルト設定のまま

1
2
3
4
5
6
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="slick-wrap1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.slick-wrap1 .slick-slide {
  padding: 1.5em 0;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  outline: 0;
  background-color: #4899DD;
}
JQuery
jQuery(function($){
$('.slick-wrap1').slick();
});
Code Penで編集

2:ドットを付ける

1
2
3
4
5
6
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="slick-wrap2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>
css
div.bg-color {
  background-color: #484848;
}

div.slick-wrap2 .slick-slide {
  padding: 1.5em 0;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  outline: 0;
  background-color: #4899DD;
}
JQuery
jQuery(function($){
$('.slick-wrap2').slick({
  dots: true,
});
});
Code Penで編集

3:ドットの色と大きさを変える