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

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/