Post

Slick Slider Code Examples

In a sea of slick sliders, Slick-slider has been in our toolkit for alost a decade.

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.

Slick Slider Setup

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>

Slick Slider with custom buttons

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>

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 Slider 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;
}

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.

1
touch "my-slick.js"

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
1
display: flex;

Fix horizontal scroll bar

when the slick track is really wide causing a horizontal scroll bar

1
2
3
.slick-container {
  overflow: hidden;
}
This post is licensed under CC BY 4.0 by the author.