AutoCarousel - Let’s make things rolls!
12 SepOk, so it’s been a while, huh? I promised you i will learn how to autoslide previous carousel. Now you can find how (is ridiculous!)
Ok, so we will use previous slider and we add this at the end of the script:
1 2 3 4 5 6 | var slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000); $('.carousel').bind('mouseenter', function(){ window.clearInterval(slideThis); }).bind('mouseleave', function(){ slideThis = window.setInterval("$('.carousel').find('a.next').trigger('click')", 1000); }); |
Ok, what happened? Well… let see:
1) We set an interval of how often carousel should ride. The time is in milliseconds, so 1000 is one second. If you want five seconds you put 5000 and so on. I defined a variable for slide because we want to be able to manipulate somehow. Every time you set a timer (either is setInterval or setTimeout) you will get an ID of that timer. If you don’t want to interact with slider, just remove the variable ![]()
2) On mouseenter event, we clear the previous timer, based on previous ID;
3) On mouseleave event we set the interval back. And… This is it
Ok, you may wonder why i used mouseenter/mouseleave events instead of hover. I don’t know if the problem is with jQuery or with Javascript (i admit, i DON’T know Javascript!), but when you use hover, on first element inside of your hovered element you will simply loose… hover. Is weird, sounds complicated, but if you try this, you will see what i mean
But wait, what will I do if I have more than one slider?
As I said before, i suck at javascript. I know some basic timer tricks and… that’s it. Maybe is possible to use same function for many sliders, i don’t know. I never need more than one auto-slider on a page
Anyhow, i saw there is a problem with timers when you have too many (high CPU usage) so.. use carefully.


sweeet
de cand asteptam