background image slider javascript
//html
<div class="main">
<div class="slider-outer">
<div class="slider">
<div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE0000);"></span></div>
<div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FEE000);"></span></div>
<div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE00C7);"></span></div>
</div>
</div>
</div>
//CSS
body{
margin:0;
padding:0;
}
.main{
width:100%;
height:400px;
margin: 0 auto;
}
.slider-outer{
height:100% !important;
overflow:hidden;
}
.slider{
width: 100%;
height: 100%;
}
.slide-image{
width: 100%;
height: 100%;
display:block;
color: transparent;
background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.slider .slide-item{
float:left;
padding: 0;
margin: 0;
}
.clear{
clear:both;
}
//JavaScript
var slideCount = document.querySelectorAll('.slider .slide-item').length;
var slideWidth = document.querySelectorAll('.slider-outer')[0].offsetWidth;
var slideHeight = document.querySelectorAll(".slider-outer")[0].offsetHeight;
var sliderUlWidth = slideCount * slideWidth;
document.querySelectorAll('.slider')[0].style.cssText = "width:" + sliderUlWidth + "px";
for (var i = 0; i < slideCount; i++) {
document.querySelectorAll('.slide-item')[i].style.cssText = "width:" + slideWidth + "px;height:" + slideHeight + "px";
}
setInterval(function() {
moveRight();
}, 3000);
var counter = 1;
function moveRight() {
var slideNum = counter++
if (slideNum < slideCount) {
var transformSize = slideWidth * slideNum;
document.querySelectorAll('.slider')[0].style.cssText =
"width:" + sliderUlWidth + "px; -webkit-transition:all 800ms ease; -webkit-transform:translate3d(-" + transformSize + "px, 0px, 0px);-moz-transition:all 800ms ease; -moz-transform:translate3d(-" + transformSize + "px, 0px, 0px);-o-transition:all 800ms ease; -o-transform:translate3d(-" + transformSize + "px, 0px, 0px);transition:all 800ms ease; transform:translate3d(-" + transformSize + "px, 0px, 0px)";
} else {
counter = 1;
document.querySelectorAll('.slider')[0].style.cssText = "width:" + sliderUlWidth + "px;-webkit-transition:all 800ms ease; -webkit-transform:translate3d(0px, 0px, 0px);-moz-transition:all 800ms ease; -moz-transform:translate3d(0px, 0px, 0px);-o-transition:all 800ms ease; -o-transform:translate3d(0px, 0px, 0px);transition:all 800ms ease; transform:translate3d(0px, 0px, 0px)";
}
}