Image slider not sliding after clicking the right arrow

Question

This problem seems quite strange , I checked for replacement for my code but all of them give the same problem . One replacement can be Jquery: mousedown effect (while left click is held down) . I am trying to make a slider that will slide the thumbs of images to right or left . From the thumbs the person can then choose and click the image he wants and it will get displayed .The thumbs can slide to both right and left . The problem is that after clicking the right button the images don't slide again towards left , I think it is something with clearinterval . Here is the fiddle , http://jsfiddle.net/2rfm5/18/ After clicking the right arrow the left sliding effect wont work .

$("#popUpInnerArrowLeft").mousedown(function(event) {
           movetoleft();
});

var into ,into2 ;

function movetoleft() {
    function moveit() { 
     $(".thumbsInnerContainer").animate({right:'+=10px'});
     }

    into = setInterval(function() {     moveit();   }, 500); 

}

$(document).mouseup(function(event) {
    clearInterval(into);

});



//for the right arrow

$("#popUpInnerArrowRight").mousedown(function(event) {
           movetoright();
});

function movetoright() {

    function moveit2() {    
     $(".thumbsInnerContainer").animate({left:'+=10px'});
     }

    into2 = setInterval(function() {    moveit2();  }, 500); 

}

$(document).mouseup(function(event) {
    clearInterval(into2);
});

can you please set up a [fiddle](http://jsfiddle.net) to try this. — Optimus Prime, Aug 08 '13 at 16:25
For me it slides to left as well as right, with a change, what else you have a problem with? — Optimus Prime, Aug 08 '13 at 17:46

score 1 · Answer 1 · answered Aug 08 '13 at 17:13

http://jsfiddle.net/arXnZ/

The issue is with the use of $(document).mouseup()

You should be doing something like :

$('#popUpInnerArrowRight, #popUpInnerArrowLeft ').mouseup(function(){
    clearInterval(stillDown);
});

Check the fiddle for a full example of how to do this.

score 1 · Accepted Answer · answered Aug 08 '13 at 18:18

1

Here it works for me, http://jsfiddle.net/2rfm5/19/

And I only changed,

    $(".thumbsInnerContainer").animate({
        right: '+=10px'
    });

to

    $(".thumbsInnerContainer").animate({
        left: '+=10px'
    });

answered Aug 08 '13 at 18:18

Optimus Prime

6,817
5
32
60

I never thought , this can make a difference .Thanks . – Siddharth Sharma Aug 08 '13 at 20:17

Image slider not sliding after clicking the right arrow

2 Answers2