CODEWITHSUNDEEP
javascriptslick.js
Shannon L
Shannon L

Reputation: 121

Slick Carousel Easing Examples

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/

Upvotes: 12

Views: 67174

Answers (3)

mbomb007
mbomb007

Reputation: 4231

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

Upvotes: 1

thrgamon
thrgamon

Reputation: 448

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

Upvotes: 6

Hugo
Hugo

Reputation: 651

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/

Upvotes: 9

Related Questions