CODEWITHSUNDEEP
javascripthtml
Jenoye Stewart
Jenoye Stewart

Reputation: 13

Javascript - html image slideshow

I am having some trouble getting my image slideshow to run automatically. I have tried several options but none has worked so far. Any help would be greatly appreciated.

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="container">
    <div id="showcase">
      <img id="imgs" src="./assets/img/achievement-agreement-arms-1068523.jpg">
    </div>
  </div>
<script type="text/javascript" src="./Javascript/main-slideshow.js"></script></body>
</html>

This is my Javascript code:

let slideImg=['./assets/img/achievement-agreement-arms-1068523.jpg',
'./assets/img/application-calculator-coffee-cup-1050304.jpg',
'./assets/img/chain-close-up-display-1036857.jpg',
'./assets/img/coffee-computer-cup-234394.jpg'];
let i = 0
setTimeout( function slider (){document.imgs.src = slideImg[i]; if (i<slideImg.lenght - 1) {i++;}else{i=0;}, 1000);
window.onload=slideImg;

I tried placing a complete path in the array list for the images, but it doesn't work.

Upvotes: 1

Views: 59

Answers (1)

Calvin Nunes
Calvin Nunes

Reputation: 6516

Besides the typos and invalid codes, there's some points to be evaluated:

  1. document.imgs is not going to select a DOM element with id='imgs', you need document.querySelector('#IdOfElement'); or document.getElementById('IdOfElement');

  2. setTimeout() will only happen once, after that, it won't happen again, in this case the method you are looking for is probable setInterval() (it's not a good method to be used, but it works in this case, so go on).

  3. I suggest you to make some free online course of basic javascript and also try to pay attention to the code, avoidin those typos you had.

The code below s probably what you need, please take a look.

let slideImg=['./assets/img/achievement-agreement-arms-1068523.jpg',
'./assets/img/application-calculator-coffee-cup-1050304.jpg',
'./assets/img/chain-close-up-display-1036857.jpg',
'./assets/img/coffee-computer-cup-234394.jpg'];
let i = 0
setInterval( function slider (){
  document.querySelector('#imgs').src = slideImg[i]; 
  console.log('new src: '+ slideImg[i]);
  if (i < slideImg.length - 1) {
    i++;
  }else{
    i=0;
  }
  }, 
1000);
window.onload=slideImg;
<div class="container">
  <div id="showcase">
    <img id="imgs" src="./assets/img/achievement-agreement-arms-1068523.jpg">
  </div>
</div>

Upvotes: 1

Related Questions