Post

Slick Slider Code Examples

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>

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>

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

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;
}
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.