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/

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/

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

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
      }
    }]
});