Slick Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

How it works #

Thedir has taken the advantage of Slick carousel and extended it with dozens of new options. The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Official documentation

For more detailed information and examples, see the official documentation: Slick Carousel .

How to use? #

Copy-paste the stylesheets <link> into your <head> to load the CSS.

<link rel="stylesheet" href="vendors/slick/slick.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="vendors/slick/slick.js"></script>

Examples #

<div class="slick-slider"
														     data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":false}'>
															<div class="box"><img src="images/slick-carousel/slider-01.jpg" alt="The first slider"></div>
															<div class="box"><img src="images/slick-carousel/slider-02.jpg" alt="The second slider"></div>
															<div class="box"><img src="images/slick-carousel/slider-03.jpg" alt="The third slider"></div>
														</div>

Text slides only #

Result
HTML

First text slide

<div class="slick-slider"
     data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":false}'>
    <div class="box" style="background-color: #b1bbc4;">
        <div class="p-4 text-center">
            <h3 class="h1">First text slide</h3>
        </div>
    </div>
    <div class="box" style="background-color: #97a4af;">
        <div class="p-4 text-center">
            <h3 class="h1">Second text slide</h3>
        </div>
    </div>
    <div class="box" style="background-color: #77838f;">
        <div class="p-4 text-center">
            <h3 class="h1">Third text slide</h3>
        </div>
    </div>
</div>

With controls #

Result
HTML

<div class="slick-slider arrows-inner"
     data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":true}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

With pagination #

Result
HTML

<div class="slick-slider dots-inner"
     data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":true,"arrows":false}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

Autoplay #

Result
HTML

<div class="slick-slider"
     data-slick-options='{"slidesToShow": 1, "autoplay":true,"dots":false,"arrows":false}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

Infinite #

Result
HTML

<div class="slick-slider"
     data-slick-options='{"slidesToShow": 1, "autoplay":true,"dots":false,"arrows":false,"infinite":true}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

Vertical #

Result
HTML

<div class="slick-slider"
     data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":true,"arrows":false,"vertical":true,"verticalSwiping":true}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

Multiple items #

Result
HTML

<div class="slick-slider arrows-inner"
     data-slick-options='{"slidesToShow": 3, "autoplay":false,"dots":false,"arrows":true}'>
    <div class="box"><img
            src="images/slick-carousel/slider-04.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-05.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-06.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-07.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-08.jpg"
            alt="The third slider"></div>
</div>

Responsive display #

Result
HTML

<div class="slick-slider arrows-inner"
     data-slick-options='{"slidesToShow": 3,"autoplay":false,"dots":false,"arrows":true,"responsive":[{"breakpoint": 768,"settings": {"slidesToShow": 2}},{"breakpoint": 576,"settings": {"slidesToShow": 1}}]}'>
    <div class="box"><img
            src="images/slick-carousel/slider-04.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-05.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-06.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-07.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-08.jpg"
            alt="The third slider"></div>
</div>

Center mode #

Result
HTML

<div class="slick-slider arrows-inner"
     data-slick-options='{"slidesToShow": 1,"autoplay":false,"dots":false,"centerMode":true,"infinite":true,"arrows":true,"responsive":[{"breakpoint": 768,"settings": {"slidesToShow": 2}},{"breakpoint": 576,"settings": {"slidesToShow": 1}}]}'>
    <div class="box"><img
            src="images/slick-carousel/slider-04.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-05.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-06.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-07.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-08.jpg"
            alt="The third slider"></div>
</div>

Slider syncing #

Result
HTML

<div class="slick-slider slider-for"
     data-slick-options='{"slidesToShow": 1,"autoplay":false,"dots":false,"arrows":false,"asNavFor":".slider-nav"}'>
    <div class="box"><img
            src="images/slick-carousel/slider-04.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-05.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-06.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-07.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-08.jpg"
            alt="The third slider"></div>
</div>
<div class="slick-slider slider-nav"
     data-slick-options='{"slidesToShow": 3,"autoplay":false,"dots":false,"arrows":false,"focusOnSelect":true,"asNavFor":".slider-for"}'>
    <div class="box"><img
            src="images/slick-carousel/slider-04.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-05.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-06.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-07.jpg"
            alt="The third slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-08.jpg"
            alt="The third slider"></div>
</div>

Right-to-left (RTL) #

Result
HTML

<div class="slick-slider" dir="rtl"
     data-slick-options='{"slidesToShow": 1, "autoplay":true,"dots":false,"arrows":false,"rtl":true}'>
    <div class="box"><img
            src="images/slick-carousel/slider-01.jpg"
            alt="The first slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-02.jpg"
            alt="The second slider"></div>
    <div class="box"><img
            src="images/slick-carousel/slider-03.jpg"
            alt="The third slider"></div>
</div>

JavaScript behavior #

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-slick-options. Example: data-slick-options='{"slidesToShow": 1}'

Attributes	Default	Description
`accessibility`	`true`	Enables tabbing and arrow key navigation
`adaptiveHeight`	`false`	Enables adaptive height for single slide horizontal carousels.
`autoplay`	`false`	Enables Autoplay
`autoplaySpeed`	`3000`	Autoplay Speed in milliseconds
`arrows`	`true`	Prev/Next Arrows
`asNavFor`	`null`	Set the slider to be the navigation of other slider (Class or ID Name)
`appendArrows`	`$(element)`	Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
`appendDots`	`$(element)`	Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
`prevArrow`	`<button type="button" class="slick-prev">Previous</button>`	Allows you to select a node or customize the HTML for the "Previous" arrow..
`nextArrow`	`<button type="button" class="slick-next">Next</button>`	Allows you to select a node or customize the HTML for the "Next" arrow.
`centerMode`	`false`	Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
`centerPadding`	`'50px'`	Side padding when in center mode (px or %)
`cssEase`	`'ease'`	CSS3 Animation Easing
`customPaging`	`n/a`	Custom paging templates. See source for use example.
`dots`	`false`	Show dot indicators
`dotsClass`	`'slick-dots'`	Class for slide indicator dots container
`draggable`	`true`	Enable mouse dragging
`fade`	`false`	Enable fade
`focusOnSelect`	`false`	Enable focus on selected element (click).
`easing`	`'linear'`	Add easing for jQuery animate. Use with easing libraries or default easing methods
`edgeFriction`	`0.15`	Resistance when swiping edges of non-infinite carousels
`infinite`	`true`	Infinite loop sliding
`initialSlide`	`0`	Slide to start on
`lazyLoad`	`'ondemand'`	Set lazy loading technique. Accepts 'ondemand' or 'progressive'
`mobileFirst`	`false`	Responsive settings use mobile first calculation
`pauseOnFocus`	`true`	Pause Autoplay On Focus
`pauseOnHover`	`true`	Pause Autoplay On Hover
`pauseOnDotsHover`	`false`	Pause Autoplay when a dot is hovered
`respondTo`	`'window'`	Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two)
`responsive`	`none`	Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.
`rows`	`1`	Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
`slide`	`''`	Element query to use as slide
`slidesPerRow`	`1`	With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
`slidesPerRow`	`1`	With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
`slidesToShow`	`1`	# of slides to show
`slidesToScroll`	`1`	# of slides to scroll
`speed`	`300`	Slide/Fade animation speed
`swipe`	`true`	Enable swiping
`swipeToSlide`	`false`	Allow users to drag or swipe directly to a slide irrespective of slidesToScroll
`touchMove`	`true`	Enable slide motion with touch
`touchThreshold`	`5`	To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider
`useCSS`	`true`	Enable/Disable CSS Transitions
`useTransform`	`true`	Enable/Disable CSS Transforms
`variableWidth`	`false`	Variable width slides
`vertical`	`false`	Vertical slide mode
`verticalSwiping`	`false`	Vertical swipe mode
`rtl`	`false`	Change the slider's direction to become right-to-left
`waitForAnimate`	`true`	Ignores requests to advance the slide while animating
`zIndex`	`1000`	Set the zIndex values for slides, useful for IE9 and lower

For more event and method please visit jQuery asRange

Previous Range slider

Next TinyMCE

How it works How to use? Examples

Image slides only Text slides only With controls With pagination Autoplay Infinite Vertical Multiple items Responsive display Center mode Slider syncing Right-to-left (RTL)

JavaScript behavior