Vanilla Javascript slider not working

Question

There are 3 css classes/phases.

The active class is the current background that is show.

The unactive class is given to the previous background. And it makes the background slide out to the left of the screen.

The transport class is given to the background after it has received the unactive class. The transport class moves the background back to the right of the screen.

The slider totally ignores the unactive class for some reason. The background never slides to the left of the screen.

 var slides = document.getElementsByClassName('bg'); var i = 0; // When page loads show first background (function() { slides[i].className += ' active'; i++; })(); function changeSlide() { // Slide previous slide to the left of the screen if(i === 0) { slides[2].className = 'bg unactive'; } else { slides[i - 1].className = 'bg unactive'; } // Slide the current slide in from the right of the screen slides[i].className += ' active'; // Make the slide go back to the right of the screen if(i === 0) { slides[2].className = 'bg transport'; slides[2].className = 'bg'; } else { slides[i - 1].className = 'bg transport'; slides[i - 1].className = 'bg'; } i++ if(i === slides.length) { i = 0; } } setInterval(changeSlide, 2000); 

 * { margin: 0; padding: 0; } html, body, .bg { width: 100%; height: 100%; } .bg { position: absolute; left: 100%; background-color: tan; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; } /* The background that is shown */ .active { position: absolute; left: 0; } /* Make the background go to the left of the screen */ .unactive { position: absolute; left: -100%; } /* Hide the background and make it go back to the right of the screen */ .transport { display: none; position: absolute; left: 100%; z-index: -1; } 

 <!-- background 1 --> <div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)"> </div> <!-- background 2 --> <div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)"> </div> <!-- background 3 --> <div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div> 

Check out this codepen. I have the same code above except I commented out a block of javascript code. Watch the slides go in and out. That is how I want it. But I want the slider to infinitely repeat and never stop.

https://codepen.io/anon/pen/aVoNNd

Answer 1

You are overwriting unactive with slides[ ].className = 'bg'; a few lines below (same with transport ), therefore its never applied.

I also had to change some z-index values and remove a few things to make it work. (See the comments in the code)

 var slides = document.getElementsByClassName('bg'); var i = 0; // When page loads show first background (function() { slides[i].className += ' active'; i++; })(); function changeSlide() { // Slide previous slide to the left of the screen if(i === 0) { slides[slides.length-1].className = 'bg unactive';//Changed 2 to slides.length-1 to avoid hardcoding values } else { slides[i - 1].className = 'bg unactive'; } // Slide the current slide in from the right of the screen slides[i].className = 'bg active';// removed += to override transport // Make the slide go back to the right of the screen // prepare NEXT slide if(i === slides.length-1) { slides[0].className = 'bg transport'; //slides[2].className = 'bg'; // dont override transport } else { slides[i + 1].className = 'bg transport'; //slides[i - 1].className = 'bg'; // dont override transport } i++ if(i === slides.length) { i = 0; } } setInterval(changeSlide, 2000); 

 * { margin: 0; padding: 0; } html, body, .bg { width: 100%; height: 100%; } .bg { position: absolute; left: 100%; background-color: tan; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; } /* The background that is shown */ .active { position: absolute; left: 0; } /* Make the background go to the left of the screen */ .unactive { position: absolute; left: -100%; z-index: -1; /*added*/ } /* Hide the background and make it go back to the right of the screen */ .transport { /*display: none;*/ position: absolute; left: 100%; z-index: -2; /*changed to -2*/ } 

 <!-- background 1 --> <div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)"> </div> <!-- background 2 --> <div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)"> </div> <!-- background 3 --> <div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>