CODEWITHSUNDEEP
jqueryhoverslider
misticx
misticx

Reputation: 65

jquery slider with pause on hover

First i wanna say, that i really red a tons of similar tutorials/guides and other stuffs, but none of them was helpful. I wanted to make as simple as possible slider and i think that I'm on a good way to do this. During a making of a slider I encountered two problems, which i don't know hot to fix. I've made a demo of my problem here http://jsfiddle.net/FJrqS/1/

First problem is that on page load, slider have some kind of lag while sliding to right, after a few second all backs to normal. i really don't know what is a problem.

Second problem is that i don't know how to make this slider to stop on hover, and on a mouse out to continues where it stops.

Thanks a lot in advance

Upvotes: 0

Views: 9606

Answers (1)

Tats_innit
Tats_innit

Reputation: 34117

Hiya hope this is helpful demo: http://jsfiddle.net/FJrqS/38/

Please let me know if this helps or not; else I will remove my post. (Hats off to you if you are writing full eye-candy style plugin :))

1) Sliding since you are using the pixel position to slide leftpos is the one which cause the minor slowness I have made a small change in it and it seems bit better behaviour then before, you can play around.

2) You can use mouse over and mouseout for the start and stop of loop. (But there will be so many other event you probably want to bind if you writing plugin)

for hover you can change .mouseover to .hover but .mouseover should do the trick.

JQuery Code Below

$(document).ready(function(){

loop();
function loop(){
    var sliderRwidth = ($('#sliderR li').length)*200;
    var leftpos =(($('#sliderR li').length))-70; 
    var rightpos = (($('#sliderR li').length)*200)-1000; 
    var speed =  5000;

$("#sliderR").css('width',sliderRwidth+'px');

$("#sliderR").animate({'left':leftpos+'px'},speed
,function() {
$("#sliderR").animate({'left':-rightpos+'px'},speed
,function(){loop();

        })
    });



}
    //On mouseover stop the slider
    $("#sliderR").mouseover(function() { 
        $(this).stop();
        return false;
    }); 

     //On mouseout start the slider
     $("#sliderR").mouseout(function() { 
        loop();
    }); 

});​

Hope this helps, Cheers!

Upvotes: 1

Related Questions