Javascript - html image slideshow

Question

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.

There are typos, missing closing tags and such all over your script. Please validate your code in sites like jshint and copy the validated code here if it still doesn't work. — AndrewL64
– AndrewL64, Commented May 15, 2018 at 17:10
this is what it gave me: var 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']; var i = 0; setTimeout( function slider () {document.imgs.src = slideImg[i]; if (i < slideImg.lenght - 1) { i++; } }, 1000); window.onload=slideImg; — Jenoye Stewart
– Jenoye Stewart, Commented May 15, 2018 at 17:20
don't post code as comment, if you need to show code always edit your question to add it. — Calvin Nunes
– Calvin Nunes, Commented May 15, 2018 at 17:24
my apologies Calvin, am not too acquainted with how everything works on here. Next time I'll know. — Jenoye Stewart
– Jenoye Stewart, Commented May 15, 2018 at 17:40

Calvin Nunes · Accepted Answer · 2018-05-15 17:22:40Z

1

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

document.imgs is not going to select a DOM element with id='imgs', you need document.querySelector('#IdOfElement'); or document.getElementById('IdOfElement');
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).
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>

answered May 15, 2018 at 17:22

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jenoye Stewart Over a year ago

Thank you Calvin for your patience in reading my code and giving your advice. I appreciate it.

Calvin Nunes Over a year ago

you're welcome, we re here to help if the asker helps himself too. If this answered your question, I suggest you to mark this as accepted answer to incentivate the S.O community to keep answering your questions

Jenoye Stewart Over a year ago

i'm going to try it now to see if it works. Sometimes, looking at something too long makes one overlook even the obvious. In fact, I feel quite a bit dumb that I hadn't noticed he errors.

Collectives™ on Stack Overflow

Javascript - html image slideshow

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest