kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.49k stars 5.89k forks source link

jQuery Easing Plugin #118

Closed lionel-m closed 10 years ago

lionel-m commented 10 years ago

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 commented 10 years ago

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.

liorocks commented 10 years ago

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 commented 10 years ago

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

liorocks commented 10 years ago

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

routy commented 8 years ago

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

kenwheeler commented 8 years ago

What are you putting in?

routy commented 8 years ago

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 commented 8 years ago

No prob, glad you enjoy it!

neil4birds commented 6 years ago

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?