Javascript Slideshow Buttons Only Showing 1 Slide

Question

I am working on a slideshow for the homepage of my website. It works, automatically shifting throughout 1-3, but the onclick functions are having some troubles. Every single one of the buttons bring me to my first slide, not the second or the third, just the first. Any help is appreciated, please and thanks!

document.getElementById("left").style.opacity =1;

var currentSlide = 2;

var myVar = setInterval(changeSlide, 5000);

function changeSlide() {
    if (currentSlide == 1) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide1.png';

      document.getElementById("left").style.opacity =1;
      document.getElementById("right").style.opacity =.5;

     } else if (currentSlide == 2) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide2.png';

      document.getElementById("middle").style.opacity =1;
      document.getElementById("left").style.opacity =.5;

     } else {
      --currentSlide;
      --currentSlide;
      document.getElementById("slide1IMG").src = 'http://theskindealer.com/img/slide3.png';

      document.getElementById("right").style.opacity =1;
      document.getElementById("middle").style.opacity =.5;

    }
}

function firstSlide() {
  currentSlide = 1;
  myVar = setInterval(changeSlide, 5000);
}
function secondSlide() {
  currentSlide = 2;
  myVar = setInterval(changeSlide, 5000);
}
function thirdSlide() {
  currentSlide = 3;
  myVar = setInterval(changeSlide, 5000);
}

          <div id="slideshow">
            <div id="slide1">
              <img src="/img/slide1.png" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
            </div>
            <div id="selectors">
              <a href="" onclick="firstSlide()">
                <div  id="left">
                </div>
              </a>
              <a href="" onclick="secondSlide()">
                <div  id="middle">
                </div>
              </a>
              <a href="" onclick="thirdSlide()">
                <div  id="right">
                </div>
              </a>
            </div>
          </div>

Answer 1

You are using links <a> tags, to handle your clicks, the page is reloading every time you click on one of them, on page reload, it will display the first slide. That is the expected behavior of href="".

The easiest solution is to change your <a> tags for <button> tags, though you could also catch the event and use event.preventDefault() to stop the page from reloading.

<button onclick="firstSlide()">
    ...
</button>
<button onclick="secondSlide()">
    ...
</button>
<button onclick="thirdSlide()">
    ...
</button>

Once you stop navigating away from the page, your code will be setting a new interval every time you handle the click, to avoid that, you could use a setTimeout() at the end of changeSlide(), instead of an interval, or clear the interval on your click handlers

function firstSlide() {

  // Change the current slide
  currentSlide = 1; 
  changeSlide();

  // Reset the interval
  clearInterval(myVar);
  myVar = setInterval(changeSlide, 5000);

}

I would probaly rename myVar to something that makes it clear that it is the interval, like refreshSlideInterval.

You could also change the conditionals inside changeSlide to use strict comparisons

if (currentSlide == 1) {...}

to

if (currentSlide === 1) {...}

Since you know that you are working with integers.

Example snippet

const content = document.getElementById("content");

let currentSlide = 2;
let slideCountDown = setTimeout(changeSlide, 3000);

function changeSlide() {

  // Clear the timeout
  clearTimeout(slideCountDown);

  if (currentSlide === 1) {

    currentSlide = 2;

    content.innerText = 1;


  } else if (currentSlide === 2) {

    currentSlide = 3;

    content.innerText = 2;

  } else {

    currentSlide = 1;

    content.innerText = 3;

  }

  // Reset the timeout
  slideCountDown = setTimeout(changeSlide, 3000);
}

function firstSlide() {
  currentSlide = 1;
  changeSlide();
}
function secondSlide() {
  currentSlide = 2;
  changeSlide();
}
function thirdSlide() {
  currentSlide = 3;
  changeSlide();
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#content {
  font-size: 5rem;
  padding: 2rem;
}

#buttons {
  display: flex;
  flex-direction: row;
}

<div id="container">

  <div id="content">1</div>

  <div id="buttons">

    <button onclick="firstSlide()">
      First
    </button>
    <button onclick="secondSlide()">
      Second
    </button>
    <button onclick="thirdSlide()">
      Third
    </button>

  </div>

</div>

Answer 2

check this (run the snippet below ) i fixed some syntax errors :

document.getElementById("left").style.opacity =1;

var currentSlide = 1;

var myVar = setInterval(function(){
return changeSlide()
}
,1000);

function changeSlide() {
    if (currentSlide == 1) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg';
      document.getElementById("left").style.opacity =1;
      document.getElementById("right").style.opacity =.5;
     } else if (currentSlide == 2) {
      currentSlide++;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg';
      document.getElementById("middle").style.opacity =1;
      document.getElementById("left").style.opacity =.5;
     } else if(currentSlide==3){
       currentSlide = 1;
      document.getElementById("slide1IMG").src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg/1024px-Pillars_of_creation_2014_HST_WFC3-UVIS_full-res_denoised.jpg';
      document.getElementById("right").style.opacity =1;
      document.getElementById("middle").style.opacity =.5;
    }
}

function firstSlide() {
  currentSlide = 1;
  clearInterval(myVar)
  myVar = setInterval(changeSlide(), 1000);
}
function secondSlide() {
  currentSlide = 2;
  clearInterval(myVar)
  myVar = setInterval(changeSlide(), 1000);
}
function thirdSlide() {
  currentSlide = 3;
  clearInterval(myVar)
  myVar = setInterval(changeSlide(), 1000);
}

<div id="slideshow">
            <div id="slide1">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Stellar_%289460796504%29.jpg/1024px-Stellar_%289460796504%29.jpg" alt="" style="width:100%;height:100%;position:absolute;" id="slide1IMG">
            </div>
            <div id="selectors">
              <a href="" onclick="firstSlide()">
                <div  id="left">
                </div>
              </a>
              <a href="" onclick="secondSlide()">
                <div  id="middle">
                </div>
              </a>
              <a href="" onclick="thirdSlide()">
                <div  id="right">
                </div>
              </a>
            </div>
          </div>

Answer 3

The setInterval at each select function are not necessary.

According to the changeSlide function, change the currentSlide as follow.

function firstSlide() {
  currentSlide = 3;
}
function secondSlide() {
  currentSlide = 1;
}
function thirdSlide() {
  currentSlide = 2;
}