Making Javascript Simple Slideshow

Question

I'm trying to create a simpke slideshow but it seem not working correctly, anyone know what i did wrong??

Here is my code:

var img = document.getElementsByTagName('img');
index = 0;
for (j = 0; j < img.length; j++) {
  img[j].style.display = 'none';
}

function slider() {
  if (index < img.length) {
    img[index - 1].style.display = 'none';
    img[index].style.display = 'block';
    index++;
  } else {
    img[index - 1].style.display = 'none';
    img[index].style.display = 'block';
    index = 0;
  }
}
slider();

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="img_lights.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="img_forest.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="slider()">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Thanks in advance

When you call slider(), index = 0 and img[index - 1] does not work. — Gerard
– Gerard, Commented Oct 18, 2018 at 12:21

kuromoka · Accepted Answer · 2018-10-18 14:10:09Z

Please try this code.
I have implemented slider and plusDivs function. I hope this output is your expected result.

html:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=1" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=2" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=3" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=4" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="slider()">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs()">&#10095;</button>
</div>

js:

var img = document.getElementsByTagName('img');
index = 0;
for (j = 1; j < img.length; j++) {
  img[j].style.display = 'none';
}

function slider() {
  img[index].style.display = 'none';

  index--;
  if (index < 0) {
    index = img.length - 1;
  }
  img[index].style.display = 'block';
}

function plusDivs() {
  img[index].style.display = 'none';

  index++;
  if (index > img.length - 1) {
    index = 0
  }
  img[index].style.display = 'block';
}

JSFiddle: https://jsfiddle.net/kuromoka/hn4wm1be/

Collectives™ on Stack Overflow

Making Javascript Simple Slideshow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related