Image Slideshow

Project Description

A slideshow with an array of images from Dublin city, Ireland.

Setting up the base web page

Your first task is to set up the base web page.

  1. In your portfolio/js folder, create a new sub-folder named images-slideshow.
  2. Download the following file to this new portfolio/js/images-slideshow folder.   index.html
  3. Give it the filename index.html.
  4. Update the website logo, favicon, <title> tag and the <footer> with your own details.

This file contains all the necessary HTML and CSS for this project.

Note: Ensure the file is linked to the lunadoge.min.css stylesheet, and not the older lunadoge.css version.

Project images

In your portfolio/js/images-slideshow folder, create an assets/img sub-folder.

Download the following six images to your new portfolio/js/images-slideshow/assets/img sub-folder.


You now have all the resources you need for your JavaScript Slideshow project.

Adding the JavaScript code

At the bottom of your index.html web page, just before the closing </body> tag, add the following JavaScript code within a <script> tag.

(function() {
   const pictures = [
      "dublin-0",
      "dublin-1",
      "dublin-2",
      "dublin-3",
      "dublin-4",
      "dublin-5"
];

// Select both left and right button. Add event listeners
const buttons = document.querySelectorAll('.btn')
const imageDIV = document.querySelector('.container-img')
let counter = 0

buttons.forEach(function(button){
   button.addEventListener('click', function(e) {
            
      if (button.classList.contains('btn-left')) {
         counter--;
         if (counter < 0) {
            counter = pictures.length - 1;
         }
         imageDIV.style.backgroundImage = `url('assets/img/${pictures[counter]}.jpg')`
         console.log(imageDIV.style.backgroundImage = `url('assets/img/${pictures[counter]}.jpg')`)
      }

      if (button.classList.contains('btn-right')) {
         counter++;
         if (counter > pictures.length - 1) {
         counter = 0;
      }
      imageDIV.style.backgroundImage = `url('assets/img/${pictures[counter]}.jpg')`
      console.log(imageDIV.style.backgroundImage = `url('assets/img/${pictures[counter]}.jpg')`)
      }
    }) // Ends loop for left and right arrows
   })
})();        

Save your file and verify it works correctly.

Upload the images-slideshow folder as a sub-folder of the portfolio/js folder on your GitHub account.