jQuery Forum

Hi folks,

I'm just learning jquery so please bear with me. Not sure if this should go in the Using or Dev forum.

I have a image slider/scroller as you can see here: http://test.kirilisa.com/old.php. This is using jquery 1.2.6 and ui 1.5.2. As you can see, it scrolls smoothly whether you drag the handle or just click somewhere in the slider bar.

I implemented the same thing with jquery 1.3.2 and ui 1.7.2 here: http://test.kirilisa.com/ Now, however, though is scrolls smoothly when you drag the handle, it jumps to the spot if you just click in the slider bar.

My slider code is below: it seems to me to be an ordering thing: in the older jquery the stop event happens before the slide event, but in the newer version it's the other way round. I could be wrong about this guess though. In any case, can anyone tell me how to achieve the smooth scrolling on click, with the newer version of jquery?

Thanks!

1. window.onload = function () { 
   
2.   var mycont = $("#sliderContent");
   
3.   var viewer = $(".viewer", mycont);  
   
4.   var conveyor = $(".content-conveyor", viewer);
   
5.   var items = $("ul", conveyor);
6.  
7.   var itemsWidth = items.innerWidth() - viewer.outerWidth();
8.   conveyor.css("width", items.innerWidth());
   
9.  
10.   var sliderOpts = {
    
11.     max: itemsWidth,
    
12.     stop: function (event, ui) {
    
13.       items.animate({'left' : ui.value * -1}, 500); 
    
14.     },
15.     slide: function(e, ui) { 
    
16.       items.css('left', ui.value * -1)
    
17.     },
18.   }; 
    
19.  
20.   $("#slider").slider(sliderOpts);
    
21. };