https://wplabo.idea-hack.com/blog/code/javascript-jquery/%e3%80%8cslick-js%e3%80%8d%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e6%8c%bf%e5%85%a5%e3%81%a7%e3%81%8d%e3%82%8b17%e3%81%a4%e3%81%ae%e5%8d%b3%e5%b8%ad/
17 instant codes that can insert a slider using “Slick.js”

17 instant codes that can insert a slider using “Slick.js”

We provide slide instant code collection which can be realized using slick.js.

“Slick.js” that makes it easy to introduce sliders

Slick.js makes it easy to introduce sliders to your site.

However, if you do not know how to use it is surprisingly difficult to implement, and since you do not have to use it afterwards, remember that you have instant code so that you can introduce it easily.

Introduction

It is necessary to load the source. Since Bootstrap or jQuery is just put in consideration for convenience, please respond flexibly.

CSS

html
<!--Only those who need it-->
<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">
<!--Only those who need it-->
<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>
<!--Only those who need it-->
<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>
<!--Only those who need it-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Code collection (basic)

1:Leave the default setting

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();
});
CodePen

2:Add a dot

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,
});
});
CodePen

3:Change the color and size of the dot

1
2
3
4
5
6