JQuery Carousel

Question

I am having problems creating images inside the slider loop. I want the track to go on both sides after they were hidden. here's jsfiddle for what i have now. http://jsfiddle.net/V2x6s/3/

Here javascript

setInterval(function() {
    var left1 = parseInt($('#track1').css('left')),
        left2 = parseInt($('#track2').css('left')),
        left3 = parseInt($('#track3').css('left'));
    
    if ($('#left1').is(":hover")) {
        $('#track1').css('left', left1+2);
    }
    else if ($('#left2').is(":hover")) {
        $('#track2').css('left', left2+2);
    }
    else if ($('#left3').is(":hover")) {
        $('#track3').css('left', left3+2);
    }
    else if ($('#right1').is(":hover")) {
        $('#track1').css('left', left1-2);
    }
    else if ($('#right2').is(":hover")) {
        $('#track2').css('left', left2-2);
    }
    else if ($('#right3').is(":hover")) {
        $('#track3').css('left', left3-2);
    }
    
}, 10);

.slider {
    position: relative;
    
    background-color: #ccc;
    height: 150px;
    margin: 10px;
    padding: 10px;
    
    overflow: hidden;
}
.track {
    position: absolute;
    top: 10px;
    left: 10px;
    
    margin: 0;
    padding: 0;
    border: 0;

    width: 2000px;
}
.book {
    float: left;
    
    margin: 0;
    margin-right: 10px;
    padding: 0;
    border: 0;
    
    width: 150px;
    height: 150px;
    
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
}
.book:hover {
    opacity: 0.5;
}
.book:nth-child(1) {
    background-color: #ff0000;
}
.book:nth-child(2) {
    background-color: #ffaa00;
}
.book:nth-child(3) {
    background-color: #ffff00;
}
.book:nth-child(4) {
    background-color: #00ff00;
}
.book:nth-child(5) {
    background-color: #0000ff;
}
.book:nth-child(6) {
    background-color: #aa00ff;
}
.book:nth-child(7) {
    background-color: #ff00ff;
}
.left, .right {
    position: absolute;
    color: white;
    font-size: 48px;
    top: 57px;
    
    cursor: pointer;
    z-index: 1;
}
.left {
    left: 0;
}
.right {
    right: 0;
}

<div class="slider">
    <div id="left1" class="left">&lt;</div>
    <div id="right1" class="right">&gt;</div>
    <div class="track" id="track1">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>
<div class="slider">
    <div id="left2" class="left">&lt;</div>
    <div id="right2" class="right">&gt;</div>
    <div class="track" id="track2">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>
<div class="slider">
    <div id="left3" class="left">&lt;</div>
    <div id="right3" class="right">&gt;</div>
    <div class="track" id="track3">
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
        <div class="book">
        </div>
    </div>
</div>

Run codeHide result

Answer 1

violin demonstration

this is how i will do it ... I would calculate the window width and element width and use them ...

// $('#track1').parent().width() - gives window width
// $('#track1 .book').length * ($('#track1 .book').width() + 5) - gives combined elements width
    if ($('#left1').is(":hover")) {
        var move = left1+20;
        if(move > $('#track1').parent().width())
            move = $('#track1 .book').length * ($('#track1 .book').width() + 5) * -1;
        $('#track1').css('left', move);
        //console.log(left1+20, tmp,$('#track1').parent().width() );
    }
    else if ($('#right1').is(":hover")) {
        var move = left1-20;
        if(move < $('#track1 .book').length * ($('#track1 .book').width() + 5) * -1 )
            move = $('#track1').parent().width();
        $('#track1').css('left', move);
        //console.log(left1-20, tmp,$('#track1').parent().width() );
    }

you can change others in a similar way, also using setIntervalfor moniter is a bad idea if you ask me.

Edit:

I would do it like this: demo

$('.left').hover(function(){
    moveLeft($(this));
});

$('.right').hover(function(){
    moveRight($(this));
});
function moveLeft(ele){
    if(ele.is(":hover")){
        var track = ele.next().next(),
            move = parseInt(track.css('left'))+10,
            books = track.find('.book'),
            wid = (books.length * (books.width()+5)) * -1;
        if(move > track.parent().width())   move = wid;
        track.css('left', move);
        setTimeout(moveLeft.bind(null, ele), 50); // change 20 to whatever number you like
    }  
}    
function moveRight(ele){
    if(ele.is(":hover")){
        var track = ele.next(),
            move = parseInt(track.css('left'))-10,
            books = track.find('.book'),
            wid = (books.length * (books.width()+5)) * -1;
        if(move < wid )   move = track.parent().width();
        track.css('left', move);
        setTimeout(moveRight.bind(null, ele), 50); // change 20 to whatever number you like
    } 
}