Classic slider for sliding/dragging

Question

I wanted to make a slider, from right to left and vice versa, but I’m not able to increase the number of px, everything is working badly.

HTML:

<div id="next"></div>
<div id="prev"></div>

<div class="slider">
    <div class="image_reel">
        <a href="#"><img src="imgs/SaraSister.jpg" alt="1" /></a>
        <a href="#"><img src="imgs/SaraSister.jpg" alt="2" /></a>
        <a href="#"><img src="imgs/SaraSister.jpg" alt="3" /></a>
        <a href="#"><img src="imgs/SaraSister.jpg" alt="4" /></a>
        <a href="#"><img src="imgs/SaraSister.jpg" alt="5" /></a>
    </div>
</div>

CSS:

.slider {
    height:400px;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    font-size: 0;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.image_reel img {
    width: 600px;
}

jQuery

var numOfImg = $('.image_reel img').length;
var imgWidth = $('.image_reel img').width();
var imagesWrapperWidth = numOfImg * imgWidth;

$('.image_reel').width(imagesWrapperWidth);

var position = $('.image_reel').css("left");

$('#next').click(function(){
    $('.image_reel').animate({
        "left": +imgWidth+'px'
    });
});

$('#prev').click(function(){
    $('.image_reel').animate({
        "left": -imgWidth+'px'
    });
});

I’ve already tried it +=imgWidth / -=imgWidth, but makes a mistake

Answer 1

Is resolved:

HTML:

<div class="button" id="testNext">&raquo;</div>
<div class="button" id="testPrev">&laquo;</div>

<div id="test">
  <div id="imgs">
    <div class="img">
        <img src="imgs/SaraSister.jpg">
    </div>
    <div class="img">
        <img src="imgs/SaraSister.jpg">
    </div>
    <div class="img">
        <img src="imgs/SaraSister.jpg">
    </div>
    <div class="img">
        <img src="imgs/SaraSister.jpg">
    </div>
  </div>

CSS:

#test {
    width: 600px;
    height: 600px;
    border: 1px solid;
    font-size: 0;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}
#imgs {
    position: absolute;
    left: 0;
    top: 0;
}
.img {
    display: inline-block;
    width: 600px;
    height: 600px;
}
.img img {
    width: 600px;
}
.button {
    width: 20px;
    text-align: center;
    height: 20px;
    cursor: pointer;
}
#testNext {
    background-color: red;
}
#testPrev {
    background-color: coral;
}
.breadcumbs {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: green;
}

jquery

var numOfImages = $('#test .img').length;
var imgsWidth = $('#test .img').width();
var imgsWrapperWidth = numOfImages * imgsWidth;

for(var i=0; i<numOfImages;i++) {
    var slideNum = i+1;
    $('#testPrev').after('<div class="breadcumbs" data-slide="' +slideNum+ '">' +slideNum+ '</div>');
}

$('#imgs').width(imgsWrapperWidth);

$(document).on('click', '#testNext', function(){

    var position = parseInt($('#imgs').css("left"));

    if(position-imgsWidth <= -imgsWrapperWidth) {
        $('#imgs').stop().animate({
            "left": 0
        });
    }
    else {
        $('#imgs').stop().animate({
            "left": position-imgsWidth+ 'px'
        });
    }
});

$(document).on('click', '#testPrev', function() {

    var position = parseInt($('#imgs').css("left"));

    if(position+imgsWidth > 0) {
        $('#imgs').stop().animate({
            "left": -imgsWrapperWidth+imgsWidth
        });
    }
    else {
        $('#imgs').stop().animate({
            "left": position + imgsWidth+ 'px'
        });
    }
});

$(document).on('click', '.breadcumbs', function() {

    var position = parseInt($('#imgs').css("left"));
    var hey = (parseInt($(this).attr('data-slide')))-1;

    $('#imgs').stop().animate({
        "left": -(imgsWidth*hey)
    });

});

Here example in jsfiddle