[Solved] slideshow and the navigation bar used here…. https://www.imaginedragonsmusic.com

Question

The way I would do it is as follows:

<span>Left Arrow</span>

    <div> First Image <div>
    <div> Second Image <div>
    <div> Third Image <div>
    <div> Fourth Image <div>

<span>Right Arrow</span>

(1) Hide all images to begin with except the first one

(2) Then setup click events on the two arrows

(3) Lets say the right arrow is clicked, it should show the 2nd image and hide the rest

(4) If its clicked again, it should show 3rd image and hide the rest,etc

(5) Setup the same thing for the left arrow

I did this a while ago with Vanilla JS, you can find the code here:
https://github.com/nishkaush/automatic-slideshow

I made it so that the images change every few seconds but the user could also change them by clicking on forward or backward arrows.

Hope this helps!

Accepted Answer