I think slick-slider is one of the best sliders around. One standout feature is the ability to click and drag the slider (touch) even while on desktop. Slick slider is Developer friendly, has good documentation and is highly capable of handling dynamic content.
Prerequisites
A site that is loading both the required slick slider CSS files and js files.
1
2
| @import "slick"; //main scss
@import "slick-theme"; //theme scss
|
1
| import "./slick/slick.min.js";
|
Default Slick Slider 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>
|
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>
|
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;
}
|
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;
}
}
|
Style slick default 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;
}
|