background image slider javascript

1//html
2<div class="main">
3  <div class="slider-outer">
4    <div class="slider">
5      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE0000);"></span></div>
6      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FEE000);"></span></div>
7      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE00C7);"></span></div>
8    
9      
10    </div>
11  </div>
12</div>
13
14//CSS
15body{
16  margin:0;
17  padding:0;
18}
19.main{
20  width:100%;
21  height:400px;
22  margin: 0 auto;
23}
24.slider-outer{
25   height:100% !important;
26   
27  overflow:hidden;
28}
29.slider{
30 
31    width: 100%;
32    height: 100%;
33    
34}
35.slide-image{
36  width: 100%;
37    height: 100%;
38   display:block;
39    color: transparent;
40    background-size: cover;
41    -moz-background-size: cover;
42    -ms-background-size: cover;
43    -o-background-size: cover;
44    -webkit-background-size: cover;
45    background-position: 50% 50%;
46    background-repeat: none;
47}
48.slider .slide-item{
49  float:left;
50    padding: 0;
51    margin: 0;
52}
53.clear{
54  clear:both;
55}
56
57//JavaScript
58  var slideCount = document.querySelectorAll('.slider .slide-item').length;
59  var slideWidth = document.querySelectorAll('.slider-outer')[0].offsetWidth;
60  var slideHeight = document.querySelectorAll(".slider-outer")[0].offsetHeight;
61
62  var sliderUlWidth = slideCount * slideWidth;
63  document.querySelectorAll('.slider')[0].style.cssText = "width:" + sliderUlWidth + "px";
64
65  for (var i = 0; i < slideCount; i++) {
66    document.querySelectorAll('.slide-item')[i].style.cssText = "width:" + slideWidth + "px;height:" + slideHeight + "px";
67  }
68
69  setInterval(function() {
70    moveRight();
71  }, 3000);
72  var counter = 1;
73
74  function moveRight() {
75    var slideNum = counter++
76      if (slideNum < slideCount) {
77        var transformSize = slideWidth * slideNum;
78        document.querySelectorAll('.slider')[0].style.cssText = 
79          "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)";
80
81      } else {
82        counter = 1;
83        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)";
84      }
85
86  }