Slick: jQuery Easing Plugin

[lionel-m]

Hi,

Can we use jQuery Easing Plugin ?

I added the script :

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

And added easing

$(document).ready(function() {
    $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 800,
        fade: false,
        slide: 'div',
        easing: 'easeInOutBack'
    });
});

But it does not work. Should I add or change something?

Thanks

[kenwheeler]

jQuery easing works with jquery animate. I don't use animate if css transitions are available. You can find the css3 equivalent and put that in the cssEase option to get the behavior you want on your browser.

[Landish]

I came here to ask the same question, but after reading @kenwheeler's comment, I used this tool http://matthewlein.com/ceaser/ to generate custom easing and put the cubic-bazier(...) in cssEase property.

$(document).ready(function() {
    $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 800,
        fade: false,
        slide: 'div',
        cssEase: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
    });
});

and it worked!

[kenwheeler]

@Landish that's awesome. Mind if I take a peek?

[Landish]

@kenwheeler Yeah, i've made a little demo for that: http://jsbin.com/lazoraqa/2/edit?html,output

[routy]

Is this no longer functional? It seems whenever I place something in the cssEase param, it doesn't look any different.

[kenwheeler]

What are you putting in?

[routy]

Hey @kenwheeler I just found another github issue that resolved the confusion, the current version of the plugin requires useTransform: true. It is now working. #1950

Thanks for this plugin, it is awesome!

[kenwheeler]

No prob, glad you enjoy it!

[neil4birds]

Love the plugin. I'd like to interrupt the slide transition when clicking the arrow so that users can rapid-fire click the next arrow and have it respond right away instead of what it does now, ignore the arrow click until the css transition is complete. Since stopping css transition is a hacking headache, any suggestions on how to handle this?