Вот, пожалуйста, jsfiddle
JS:
//init
slides = document.getElementsByClassName("slide");
containerWidth = 500;
Array.prototype.forEach.call(slides, function (el, i) {//set the initial position of each slide
el.style.left = (i * containerWidth) + "px";
});
window.moveSlides = function (direction) {
run = true;
tracker = containerWidth; //500 in this example. We make a separate variable so we can decrement it
if (((direction == "next" && (parseInt(slides[0].style.left) <= (0 - (containerWidth * (slides.length - 1)))))) //compare against 2nd-to-last slide's index, otherwise it'll go 1 slide too far
|| (direction == "prev" && (parseInt(slides[0].style.left) >= 0))) { run = false; }
if (run) {
var slideInterval = setInterval(function () {
moveRate = 4; //set the speed here (use numbers that the container's width can be divided by without a remainder)
Array.prototype.forEach.call(slides, function (el, i) {
if (tracker <= 0) {
clearInterval(slideInterval)
} else {
el.style.left = (direction == "next") ? (parseInt(el.style.left) - moveRate) + "px" : (parseInt(el.style.left) + moveRate) + "px";
}
});
tracker -= moveRate;
}, 1);
}
}
HTML:
<div id="slider-container">
<div id="slider-mask">
<div class="slide one">slide 1</div>
<div class="slide two">slide 2</div>
<div class="slide three">slide 3</div>
<div id="buttons">
<a href="javascript:moveSlides('prev');" id="prev"><Previous</a>
|
<a href="javascript:moveSlides('next');" id="next">Next></a>
</div>
</div>
</div>
CSS:
#slider-container {
width: 999999px;
height: 300px; //set to the height you want
position:relative;
}
#slider-mask {
width:500px; //set slide width. must be equal to slide width
height:300px;
overflow:hidden;
position:relative;
}
.slide {
width:500px;
height:100%;
top:0;
position:absolute;
}
#buttons {
position:absolute;
bottom:5px;
left:50%;
width: 150px;
height:30px;
margin-left:-75px;
}