Skip to main content

​
Theme Files Overview

Slick Carousel comes with two main CSS files:

slick.css

Core structural styles required for functionality

slick-theme.css

Optional default theme with arrows and dots styling
<!-- Required: Core styles -->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

<!-- Optional: Default theme -->
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
The theme file is optional. You can create your own custom styles instead of using slick-theme.css.

​
Sass Variables

If you’re using Sass, customize Slick’s theme by overriding these variables:

​
Available Variables

VariableTypeDefaultDescription
$slick-font-pathstring"./fonts/"Directory path for the slick icon font
$slick-font-familystring"slick"Font-family for slick icon font
$slick-loader-pathstring"./"Directory path for the loader image
$slick-arrow-colorcolorwhiteColor of the left/right arrow icons
$slick-dot-colorcolorblackColor of the navigation dots
$slick-dot-color-activecolor$slick-dot-colorColor of the active navigation dot
$slick-prev-characterstring'\2190'Unicode character for the previous arrow (←)
$slick-next-characterstring'\2192'Unicode character for the next arrow (→)
$slick-dot-characterstring'\2022'Unicode character for the navigation dot (•)
$slick-dot-sizepixels6pxSize of the navigation dots
$slick-opacity-defaultfloat0.75Default opacity for arrows and active dots
$slick-opacity-on-hoverfloat1Opacity on hover state
$slick-opacity-not-activefloat0.25Opacity for inactive dots

​
Using Sass Variables

// Override before importing slick-theme
$slick-arrow-color: #ff0000;
$slick-dot-color: #333;
$slick-dot-color-active: #ff0000;

@import "slick-carousel/slick/slick-theme.scss";

​
Customizing Arrows

​
CSS Customization

Override the default arrow styles: 
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  z-index: 1;
}

.slick-prev {
  left: 25px;
}

.slick-next {
  right: 25px;
}

.slick-prev:before,
.slick-next:before {
  font-size: 40px;
  color: #333;
}

​
Example from Source

From index.html:31-34: 
.slick-prev:before,
.slick-next:before {
  color: black;
}

​
HTML Custom Arrows

Replace arrows with custom HTML: 
$('.slider').slick({
  prevArrow: '<button type="button" class="custom-prev"><i class="fa fa-chevron-left"></i></button>',
  nextArrow: '<button type="button" class="custom-next"><i class="fa fa-chevron-right"></i></button>',
  appendArrows: '.custom-arrows-container'
});
1

Define custom arrow HTML

Use the prevArrow and nextArrow options with your custom HTML
2

Position with CSS

Style your custom arrow elements with CSS
3

Specify container (optional)

Use appendArrows to place arrows in a specific container

​
Customizing Dots

​
CSS Styling

.slick-dots {
  bottom: -45px;
}

.slick-dots li button:before {
  font-size: 12px;
  color: #999;
  opacity: 0.5;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #000;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

​
Custom Dot Markup

From the source code default in slick.js:65-67: 
customPaging: function(slider, i) {
    return $('<button type="button"></button>').text(i + 1);
}

​
Advanced Custom Dots

$('.slider').slick({
  dots: true,
  customPaging: function(slider, i) {
    // Thumbnail dots
    return '<button type="button"><img src="thumb' + i + '.jpg"></button>';
  },
  dotsClass: 'custom-dots',
  appendDots: '.dots-container'
});

customPaging: function(slider, i) {
  return '<button type="button">' + (i + 1) + '</button>';
}

​
Slide Styling

​
Custom Slide States

Style different slide states using Slick’s classes: 
.slick-slide {
  margin: 0 10px;
  transition: all ease-in-out 0.3s;
  opacity: 0.5;
}

.slick-active {
  opacity: 0.8;
}

.slick-current {
  opacity: 1;
  transform: scale(1.05);
}

.slick-center {
  transform: scale(1.1);
}

​
Example from Source

From index.html:37-48: 
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.slick-slide

All slides in the carousel

.slick-active

Currently visible slides

.slick-current

The current/focused slide

.slick-center

Center slide in center mode

​
Loading State

Customize the loading appearance: 
.slick-loading .slick-list {
  background: #fff url('./ajax-loader.gif') center center no-repeat;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

​
Custom Loader

.slick-loading .slick-list {
  background: #f0f0f0;
}

.slick-loading .slick-list:after {
  content: 'Loading...';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 20px;
  color: #999;
}

​
Disabled State Styling

.slick-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

​
Container Customization

​
Slider Container

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
}

.slick-list {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

​
Responsive Styling

Apply different styles at breakpoints: 
/* Desktop */
.slick-slide {
  margin: 0 15px;
}

/* Tablet */
@media (max-width: 768px) {
  .slick-slide {
    margin: 0 10px;
  }
  
  .slick-prev {
    left: 10px;
  }
  
  .slick-next {
    right: 10px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .slick-slide {
    margin: 0 5px;
  }
  
  .slick-dots {
    bottom: -30px;
  }
}

​
Complete Custom Theme Example

// Variables
$primary-color: #3498db;
$slider-spacing: 20px;
$arrow-size: 50px;

.custom-slider {
  margin: 0 auto;
  padding: 0 60px;

  .slick-slide {
    margin: 0 $slider-spacing/2;
    transition: all 0.3s ease;
    
    img {
      width: 100%;
      border-radius: 8px;
    }
  }

  .slick-prev,
  .slick-next {
    width: $arrow-size;
    height: $arrow-size;
    background: $primary-color;
    border-radius: 50%;
    z-index: 1;

    &:before {
      color: white;
      font-size: 24px;
      opacity: 1;
    }

    &:hover {
      background: darken($primary-color, 10%);
    }
  }

  .slick-prev {
    left: 0;
  }

  .slick-next {
    right: 0;
  }

  .slick-dots {
    bottom: -40px;

    li button:before {
      font-size: 10px;
      color: $primary-color;
      opacity: 0.4;
    }

    li.slick-active button:before {
      opacity: 1;
    }
  }
}
Always include the core slick.css file even when using custom themes. It contains essential structural styles.

Build docs developers (and LLMs) love

Get started for freeTalk to us