Slick Carousel Easing Examples

Question

I am using Slick Carousel (http://kenwheeler.github.io/slick/), but don\'t know how to incorporate different slide transitions. Does anyone have an example to share?

He

Answer 1

The plugin doesn't use jquery animations if CSS transitions are available.

If you want to use a specific animation style, such as those found in an easing library you can create the CSS for them here. You can then use cssEase instead of Easing, and copy in the CSS that is generated.

For example:

$('.slider1').slick({
        autoplay:true,
        autoplaySpeed: 4500,
        arrows:false,
        slide:'.slider-pic', 
        slidesToShow:1,
        slidesToScroll:1,
        dots:false,
        cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            dots: false
          }
        }]
    });

Answer found in the documentation here: here