Simple image slider not working (jQuery)

Question

I am creating a simple slider using jQuery.

The problem: The slider is disappearing and/or collapsing (you can see it when you refresh before it disappears).

What I'm trying to do: Make the positions of the images absolute and then using JavaScript show the nth index using the display property in the script.

Not sure if it is the css or the JavaScript that is making it hidden. Any ideas what I am doing wrong?

 $(document).ready(function() { $('#sidebar-btn').click(function() { $('#sidebar-nav').toggleClass('visible'); }); }); var index = 0; function plusIndex(n) { index = index + 1; showImage(index); } /* SLIDER */ showImage(1); /* Slider function */ function showImage(n) { var i; var x = document.getElementsByClassName("slider-img"); // for next slide - forward. if(n > x.length) { index = 1 }; // for prev slide - backwards if(n < 1 ) { index = x.length /* last one */ }; for(i=0; i<x.length; i++) { x[i].style.display = "none"; } x[index-1].style.display = "block"; } 

 .updates-box { background-color: #f5f5f5; text-align: center; padding: 2rem; } .updates-item-headline { font-weight: bold; } .updates-item { padding: 1rem; margin: 1rem auto; } .slider { position: relative; } .slider-img { position: absolute; } .slider .slider-btn { position: absolute; color: black; width: 50px; border:none; border-radius: 25px; top: 190px; font-size: 35px; margin: 1rem; } .slider #slide-btn2 { position: relative; float: right; } .slider #slide-btn1:hover { box-shadow: 10px 0px 20px 0px black; } .slider #slide-btn2:hover { box-shadow: 10px 0px 20px 0px black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hero-box"> <div id="slide-wrapper"> <div class="slider"> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> <img class="slider-img" src="img/hero-slider-home.jpg" alt="Flowers"> </picture> </div> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> <img class="slider-img" src="img/slide-2-home.jpg" alt="Flowers"> </picture> </div> <button class="slider-btn" id="slide-btn1">&#10094;</button> <button class="slider-btn" id="slide-btn2">&#10095;</button> </div> </div> </div> <div class="updates-box"> <div class="updates-item-headline"> <p> UPCOMING EVENT DATES</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item-4"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> </div> 

Answer 1

In your code snippet... You have the error:

Cannot read property 'style' of undefined"

That error says x[index-1] is undefined.
It IS undefined because index is defined in one of the two if conditions above... Which both evaluate to false .

1. In if(n > x.length) : n = 1 and x.length = 2
2. In if(n < 1 ) : n = 1

So index is "undefined".

Then comes a for loop, setting all images to display:none .
That is why you may see them a couple milliseconds on refresh.

And finally, x[index-1] also is undefined.. So no image is setted back to display:block .

I suggest you to add a case where the condition could be evaluated to true :

if(n >= 1 && n<=x.length ){ index = n; };

 console.clear(); $(document).ready(function() { $('#sidebar-btn').click(function() { $('#sidebar-nav').toggleClass('visible'); }); }); var index = 0; function plusIndex(n) { index = index + 1; showImage(index); } /* SLIDER */ showImage(1); /* Slider function */ function showImage(n) { var i; var x = document.getElementsByClassName("slider-img"); // for next slide - forward. if(n > x.length) { index = 1 }; // for prev slide - backwards if(n < 1 ) { index = x.length /* last one */ }; if(n >= 1 && n<=x.length ){ index = n; }; // ADD THIS CASE for(i=0; i<x.length; i++) { x[i].style.display = "none"; } x[index-1].style.display = "block"; } 

 .updates-box { background-color: #f5f5f5; text-align: center; padding: 2rem; } .updates-item-headline { font-weight: bold; } .updates-item { padding: 1rem; margin: 1rem auto; } .slider { position: relative; } .slider-img { position: absolute; } .slider .slider-btn { position: absolute; color: black; width: 50px; border:none; border-radius: 25px; top: 190px; font-size: 35px; margin: 1rem; } .slider #slide-btn2 { position: relative; float: right; } .slider #slide-btn1:hover { box-shadow: 10px 0px 20px 0px black; } .slider #slide-btn2:hover { box-shadow: 10px 0px 20px 0px black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hero-box"> <div id="slide-wrapper"> <div class="slider"> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg"> <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg"> <img class="slider-img" src="http://lorempixel.com/400/200/cats" alt="Flowers"> </picture> </div> <div class="slide"> <picture> <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg"> <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg"> <img class="slider-img" src="http://lorempixel.com/400/200/nature" alt="Flowers"> </picture> </div> <button class="slider-btn" id="slide-btn1">&#10094;</button> <button class="slider-btn" id="slide-btn2">&#10095;</button> </div> </div> </div> <div class="updates-box"> <div class="updates-item-headline"> <p> UPCOMING EVENT DATES</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> <div class="updates-item-4"> <img class="update-icon" src="img/dates-icon.png"> <p><b>Thursday 3 August</b></p> <p> Open Seminar Enrollment</p> </div> </div>