In a sea of sliders and carousels, “Slick slider” has been in our toolkit for almost a decade. Its flexibility and ease of use (from a coding perspective) prevails. Now heres some of the best features of you should know about Slick Slider.
Why you should use slick slider
- Its easy to install (especially with this resource)
- Easy to customise
- Its Feature rich without being bloated. One standout feature is the ability to click and drag the slider (touch) even while on desktop.
- Developer friendly, has good documentation and is highly capable of handling dynamic content.
Setup
With scss.
1
2
| @import "slick"; //main scss
@import "slick-theme"; //theme scss
|
1
| import "./slick/slick.min.js";
|
Simple Example
Quick reference to a working slick slider with default previous and next arrows and dot style pager.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- Add the slick-theme.css if you want default styling -->
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<!-- Add the slick-theme.css if you want default styling -->
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<script>
$(document).ready(function () {
$(".your-class").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 500,
cssEase: "linear",
});
});
</script>
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
</body>
</html>
|
Use dashes instead of dots
If you want to use a nice sleek dash as a pager icon rather then the standard slick dots. One way to do this is to hide the dot and use border-bottom.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .slick-dots {
display: flex;
bottom: 7px;
width: auto;
position: relative;
li {
border-bottom: 3px solid $blue-1;
text-indent: -9999em;
width: 60px;
}
.slick-active {
border-bottom: 3px solid $blue;
}
li button::before {
display: none;
}
}
|
If you need a lots of control over your next previous buttons for custom styling and layout.
- Find a section with the
class of benefits. - Find the slideshow container with the
id of benefits-slider - Set the next arrow variable
- Set the previous arrow variable
- Set responsive slick to show 1 slide on mobile but show 5 on larger and 1 on screens smaller then
1024 - Custom positioning of pager dots using
appendDots
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| $(function () {
var arrowsOn = true;
$('section.benefits').each(function () {
$slider = $(this).find('#benefits-slider');
$nextArrow = $(this).find('.benefits__next');
$prevArrow = $(this).find('.benefits__prev');
$slider.slick({
slidesToShow: 5,
slidesToScroll: 1,
dots: true,
arrows: arrowsOn,
appendDots: $('#benefits__slick-nav-wrapper'),
prevArrow: $prevArrow,
nextArrow: $nextArrow,
variableWidth: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
});
});
|
Html code for custom slick slider nextArrow and prevArrow
1
2
3
4
5
6
7
8
9
10
11
| <section class="benefits">
<div class="slick-container">
<div id="benefits-slider" class="slick-slider">
<div class="benefits__item">[all your slides here]</div>
</div>
</div>
<div class="row " id="benefits__slick-nav-wrapper">
<button type="button" class="benefits__prev">Previous</button>
<button type="button" class="benefits__next">Next</button>
</div>
</section>
|
Display Arrows
When arrows is set to true in your slick-init.js, slick will display some default arrows. But you might not be able to see them if it’s on a white background. Add a bit of CSS so that you can see them.
1
2
3
4
| .slick-prev::before,
.slick-next::before {
background-color: $dark;
}
|
Add Slick Slider to a Webpack Project with NPM
The big appeal of NPM was that you could install some functionality quickly and easily directly into your project by running a single command from your command line. Cutting out the copy/paste juggling act you need to perform when you manually download a library via zip file to your downloads folder. Then unzip and copy files into your project folder. This process is tedious and prone to error. Using npm streamlines this process. Here we look at installing slick slider into you’re webpack project using npm.
1
| npm install slick-carousel
|
Move slick to a public folder
When slick slider is installed it will install into node_modules. We can move it out of there and move it into your project directory. My projects don’t require the node_modules folder to be deployed. This is a bit of a hassle but I’ve learned to live with it.
1
| mv -rf node_modules/slick-carousel src/js/
|
Import slick from your index.js
Now use your index.js to import slick slider from its new location
1
2
3
| import "./js/slick-carousel/slick/slick";
import "./js/slick-carousel/slick/slick.scss";
import "./js/slick-carousel/slick/slick-theme.scss";
|
Create your custom script to initialise
This file should contain the init script for slick slider. This is where you can specify you custom slider properties.
Import custom slick init into your index.js
Import your slick init script . This script should be loaded after the slick library script mentioned previously.
1
| import "./js/my-slick";
|
Slick Slider Example Code
Here’s a list of some handy slick slider examples I often use as a reference or starting point.
slick example
Troubleshooting
- The slick container width becomes massive when the slick container parent is using
when the slick track is really wide causing a horizontal scroll bar
1
2
3
| .slick-container {
overflow: hidden;
}
|