javascript - Automatic slideshow with prev and next indicators

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I am trying to create a sideshow that will automatically transition from one picture to the next but also be able to let the user manually change the slide using previous and next indicators.
I am using the tutorial from this link: https://www.w3schools.com/howto/howto_js_slideshow.asp
But they don't merge the two together and I cannot find any way to get it to work.
This is the code that I have:
var slideIndex = 1;
  showSlides(slideIndex);
  function plusSlides(n) {
    showSlides(slideIndex += n);
  function currentSlide(n) {
    showSlides(slideIndex = n);
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
/* Slideshow container */
.slideshow-container {
  display:                 flex;
  display:                 -webkit-flex; /* Safari 8 */
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;         /* Safari 8 */
  justify-content:         center;
  -webkit-justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4%;
  width: auto;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
.slideshow-container img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 3px;
@media screen and (max-width: 1000px) {
  .slideshow-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
.mySlides {
   display: none;
/* Next & previous buttons */
.prev, .next {
 cursor: pointer;
 position: absolute;
 top: 45%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
.prev {
 left: 0;
 border-radius: 3px 0 0 3px;
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 background-color: rgba(0,0,0,0.8);
/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 50px;
 width: 100%;
 text-align: center;
/* The dots/bullets/indicators */
.dot {
 cursor: pointer;
 height: 13px;
 width: 13px;
 bottom: 50px;
 margin: 0 2px;
 position: relative;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
.active, .dot:hover {
 background-color: #717171;
/* Fading animation */
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 4s;
 animation-name: fade;
 animation-duration: 4s;
@-webkit-keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
@keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
<div class="slideshow-container">
  <div class="mySlides fade"><a href="#"><img src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style="width:100%"></a></div>
  <div class="mySlides fade"><a href="#"><img src="http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style="width:100%"></a></div>
  <div class="mySlides fade"><a href="#"><img src="http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style="width:100%"></a></div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    var i;
    var x = document.getElementsByClassName( "mySlides ");
    for (i = 0; i < x.length; i++) {
       x[i].style.display =  "none ";  
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display =  "block ";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
// End of auto Slideshow
  var i;
  var x = document.getElementsByClassName( "mySlides ");
  var dots = document.getElementsByClassName( "demo ");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display =  "none ";  
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace( " w3-red ",  " ");
  x[slideIndex-1].style.display =  "block ";  
  dots[slideIndex-1].className +=  " w3-red ";
  var i;
  var x = document.getElementsByClassName( "mySlides ");
  var dots = document.getElementsByClassName( "demo ");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display =  "none ";  
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace( " w3-red ",  " ");
  x[slideIndex-1].style.display =  "block ";  
  dots[slideIndex-1].className +=  " w3-red ";
body {
background-color: black;
color: red;
.mySlides {}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
.w3-content w3-display-container { border: 2px solid red; }
    <div class= "w3-content w3-display-container " style= "max-width:800px ">
<img class= "mySlides " src= "https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style= "width:100% ">
<img class= "mySlides " src= "http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style= "width:100% ">
<img class= "mySlides " src= "http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style= "width:100% ">
    <div class= "w3-center ">
      <div class= "w3-section ">
        <div class= "w3-left w3-padding-left w3-hover-text-khaki " onclick= "plusDivs(-1) ">&#10094;</div>
        <div class= "w3-right w3-padding-right w3-hover-text-khaki " onclick= "plusDivs(1) ">&#10095;</div>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(1) "></span>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(2) "></span>
        <span class= "w3-badge demo w3-border w3-transparent w3-hover-red " onclick= "currentDiv(3) "></span>
                Awesome. Thanks I got it working. I can figure out how to fix the round buttons but I have been trying to figure this out for quite a while and you helped me out. Upvoted
– ScarletHarlot
                Apr 24, 2017 at 18:12
                Still not understanding the logic behind slides[slideIndex-1].style.display= "block"; Shouldn't it just be slides[slideIndex].style.display= "block"; to set the current slide visible?
– cool-peaches
                Mar 5, 2022 at 8:26
Yeah too bad they didn't make the samples compatible. To keep it close to original code you have, just use an interval to call plusSlides(1):
var slideIndex = 1;
  showSlides(slideIndex);
  function plusSlides(n) {
    showSlides(slideIndex += n);
  function currentSlide(n) {
    showSlides(slideIndex = n);
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    if (slideIndex> slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active";
 setInterval(plusSlides, 2000, 1); // call plusSlider, with 1 as parameter
                Still not understanding the logic behind slides[slideIndex-1].style.display= "block"; Shouldn't it just be slides[slideIndex].style.display= "block"; to set the current slide visible? @yezzz
– cool-peaches
                Mar 5, 2022 at 8:26
                Ufff long time ago... had a quick look at the code.... slides[x] is 0-based (ie x is 0 for first element)... but slideIndex is based on slides.length (=number of slides). and uses 1 as the lowest number, so it's 1-based. So slideIndex-1 is to return a 0-based value...(slideIndex as var name is badly chosen though)
– yezzz
                Mar 6, 2022 at 1:40
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.