I wanted to make a slide slider, from right to left and vice versa, but I'm not able to increment the px number, everything is malfunctioning.
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 +=imgWidth
/ -=imgWidth
, but it gives error