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?

Here's what I currently have:

    $('.slider1').slick({
        autoplay:true,
        autoplaySpeed: 4500,
        arrows:false,
        slide:'.slider-pic', 
        slidesToShow:1,
        slidesToScroll:1,
        dots:false,
        easing: 'easeOutElastic',
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            dots: false
          }
        }]
    });

On site - http://lantecctc.businesscatalyst.com/

Graf

What exactly are you trying to accomplish? With Slick you can adjust things like timing and easing, but you can't do much to customize transitions beyond simple fades and slides. – Urina

I really just want to slow down the transition between slides. – Graf

However, I would also like to know the capabilities. I thought that I would be able to use any of the jquery easing effects. – Graf

Read the documentation carefully, all of that information is in there under the "Settings" section. You can certainly change the speed of the transition as well as use any CSS3 or jQuery easing function. – Urina

Answer 1

Use cssEase instead of easing - this is the notation detailed on slick. Not sure whether 'easeOutElastic' is allowed; as far as I'm aware slick uses standard CSS3 animations and easeOutElastic is not one of the supported values. Your closest option might be ease-out: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Update from helpful comments: useTransform: true is necessary for this to work in some cases:

$('.slider1').slick({
    useTransform: true,
    autoplay:true,
    autoplaySpeed: 4500,
    arrows:false,
    slide:'.slider-pic', 
    slidesToShow:1,
    slidesToScroll:1,
    dots:false,
    cssEase: 'ease-out',
    responsive: [
    {
      breakpoint: 1024,
      settings: {
        dots: false
      }
    }]
});

setting: cssEase, type: string, default value: 'ease', uses CSS3 Animation Easing - http://kenwheeler.github.io/slick/

Dissimilation

Worked for me, but I had to add useTransform: true, to make this work. – Silva

useTransform: true was also necessary for me. This made a huge difference in not only using the right easing but also ironing out the herky-jerky default sliding transition. – Counterattack

useTransform: true is true by default anyway – Ovotestis

Answer 2

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

Masculine

Answer 3

You can set useCSS: false in order to use jQuery easing instead. The documentation says it will "Enable/Disable CSS Transitions".

$('.slider1').slick({
    autoplay:true,
    autoplaySpeed: 4500,
    arrows:false,
    slide:'.slider-pic', 
    slidesToShow:1,
    slidesToScroll:1,
    dots:false,
    useCSS: false,
    easing: 'easeOutElastic',
    responsive: [
    {
      breakpoint: 1024,
      settings: {
        dots: false
      }
    }]
});

Dorothi

I can confirm easing: 'easeOutElastic' is working only with the help of jQuery.easing.min.js plugin. cdnjs.com/libraries/jquery-easing – Hanni