Slick – The last jQuery Carousel you’ll ever need

Slick

Slick is maybe the last Carousel you’ll ever need, if your projects are always running with jQuery (at least version 1.7)! The script itself offers many configurations, adapts itself to any responsive view and supports Mobile devices as well. It also runs an all modern browsers, including the not so modern 8+! It is also available for nodeJS and includes a AMD Module definition.

The demonstration page remembers a bit on Lory (or rather the other way around, because Slick is a year older then lory). Slick also comes up with a lazy load functionallity, Arrows, Dots and Gestures Navigation and the possibility to slide / show multiple elements at once.

Download the latest version of Slick as .ZIP or as .TAR package!

npm i slick-carousel --save

yarn add slick-carousel --save

bower install slick-carousel --save

Instructions

The package itself contains the main JavaScript file as well as the main Stylesheet, both are also available in a minified version. A demonstration theme is also available and comes up with an own icon font as well as an included ajax loader GIF animation. All Stylesheets are also included in the Pre-Processing Stylesheet language SASS (SCSS) and LESS.

 

Load Slick

It’s recommended to load the respective Stylesheet (as well as the optional Theme) directly within the Header of your HTML Document. The required JavaScript file should be embed directly after the opened <body> Tag, but don’t forget to link the jQuery library BEFORE your include Slick!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/slick.css" />
        
        <!-- Optional Theme Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/slick-theme.css" />
    </head>
    <body>
        <!-- Required jQuery Library -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/slick.js"></script>

        <!-- Required HTML Structure -->
        <div class="slick-slider">
            <div><!-- Slider #1 --></div>
            <div><!-- Slider #2 --></div>
            <div><!-- Slider #3 --></div>
            <div><!-- Slider #4 --></div>
            <div><!-- Slider #5 --></div>
        </div>
    </body>
</html>

 

Configure Slick

This library comes up with almost 50 different settings, which customize the design and the behavior of this Slider / Carousel. The custom attribute data-slick="{'dots': true}" can also be used to configure the respective options directly on the main HTML element!

jQuery(document).ready({
    $(".slick-slider").slick({
        accessibility:      true,
        adaptiveHeight:     false,
        appendArrows:       $(element),
        appendDots:         $(element),
        arrows:             true,
        asNavFor:           $(element),
        autoplay:           false,
        autoplaySpeed:      3000,
        centerMode:         false,
        centerPadding:      '50px',
        cssEase:            'ease',
        customPaging:       n/a,
        dots:               false,
        dotsClass:          'slick-dots',
        draggable:          true,
        easing:             'linear',
        edgeFriction:       0.15,
        fade:               false,
        focusOnSelect:      false,
        focusOnChange:      false,
        infinite:           true,
        initialSlide:       0,
        lazyLoad:           'ondemand',
        mobileFirst:        false,
        nextArrow:          '',
        pauseOnDotsHover:   false,
        pauseOnFocus:       true,
        pauseOnHover:       true,
        prevArrow:          '',
        respondTo:          'window',
        responsive:         null,
        rows:               1,
        rtl:                false,
        slide:              '',
        slidesPerRow:       1,
        slidesToScroll:     1,
        slidesToShow:       1,
        speed:              300,
        swipe:              true,
        swipeToSlide:       false,
        touchMove:          true,
        touchThreshold:     5,
        useCSS:             true,
        useTransform:       true,
        variableWidth:      false,
        vertical:           false,
        verticalSwiping:    false,
        waitForAnimate:     true,
        zIndex:             1000
    });
});

 

Configure: Options

accessibility
Enables tabbing and arrow key navigation. Unless autoplay: true, sets browser focus to current slide (or first of current slide set, if multiple slidesToShow) after slide change. For full a11y compliance enable focusOnChange in addition to this.
adaptiveHeight
Adapts slider height to the current slide
appendArrows
Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
appendDots
Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
arrows
Enable Next/Prev arrows
asNavFor
Enables syncing of multiple sliders
autoplay
Enables auto play of slides
autoplaySpeed
Auto play change interval
centerMode
Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding
Side padding when in center mode. (px or %)
cssEase
CSS3 easing
customPaging
Custom paging templates. See source for use example.
dots
Current slide indicator dots
dotsClass
Class for slide indicator dots container
draggable
Enables desktop dragging
easing
animate() fallback easing
edgeFriction
Resistance when swiping edges of non-infinite carousels
fade
Enables fade
focusOnSelect
Enable focus on selected element (click)
focusOnChange
Puts focus on slide after change
infinite
Infinite looping
initialSlide
Slide to start on
lazyLoad
Accepts ‘ondemand’ or ‘progressive’ for lazy load technique. ‘ondemand’ will load the image as soon as you slide to it, ‘progressive’ loads one image after the other when the page loads.
mobileFirst
Responsive settings use mobile first calculation
nextArrow
Allows you to select a node or customize the HTML for the “Next” arrow.
pauseOnDotsHover
Pauses autoplay when a dot is hovered
pauseOnFocus
Pauses autoplay when slider is focussed
pauseOnHover
Pauses autoplay on hover
prevArrow
Allows you to select a node or customize the HTML for the “Previous” arrow.
respondTo
Width that responsive object responds to. Can be ‘window’, ‘slider’ or ‘min’ (the smaller of the two).
responsive
Array of objects containing breakpoints and settings objects (see example). Enables settings at given breakpoint. Set settings to “unslick” instead of an object to disable slick at a given breakpoint.
rows
Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
rtl
Change the slider’s direction to become right-to-left
slide
Slide element query
slidesPerRow
With grid mode initialized via the rows option, this sets how many slides are in each grid row.
slidesToScroll
# of slides to scroll at a time
slidesToShow
# of slides to show at a time
speed
Transition speed
swipe
Enables touch swipe
swipeToSlide
Swipe to slide irrespective of slidesToScroll
touchMove
Enables slide moving with touch
touchThreshold
To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
useCSS
Enable/Disable CSS Transitions
useTransform
Enable/Disable CSS Transforms
variableWidth
Disables automatic slide width calculation
vertical
Vertical slide direction
verticalSwiping
Changes swipe direction to vertical
waitForAnimate
Ignores requests to advance the slide while animating
zIndex
Set the zIndex values for slides, useful for IE9 and lower

Leave a Reply

Top