Background Image Slideshow Using JavaScript

This tutorial guides you through creating a dynamic and visually appealing background image slideshow using Javascript. This effect can significantly enhance the user experience of your website by adding a captivating visual element that automatically cycles through a series of images. It’s a great way to showcase different aspects of your brand, products, or services.

Setting Up the HTML Structure

First, we need to create the basic HTML structure for our slideshow. This will include a container for the images and a header section with text.

<header class="intro">
  <div class="intro-slideshow">
    <img src="https://www.dropbox.com/s/h8rds5ozk0u3s2f/coder.jpg?raw=1">
    <img src="https://www.dropbox.com/s/lf29ifrd354ngyv/coffee.jpg?raw=1">
    <img src="https://www.dropbox.com/s/lxnf1mxej90qoae/library.jpg?raw=1">
    <img src="https://www.dropbox.com/s/15gdoyzoai94j6j/path.jpg?raw=1">
    <img src="https://www.dropbox.com/s/pem8kaorr488apn/universe.jpg?raw=1">
  </div>
  <div class="intro-header">
    <h1>Coding Journey</h1>
    <p>It's all about the journey</p>
  </div>
</header>
    <script  src="./script.js"></script>

Styling with CSS

Now, let’s style the slideshow using CSS to ensure it looks appealing and functions correctly. This includes setting up the positioning, sizing, and transition effects for the images.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #fff;
}

.intro {
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 0.1rem;
}
.intro-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: width: 100vw; */
  height: 100%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: height: 100vh; */ 
  object-fit: cover;
  z-index:-1;
  /* filter: brightness(50%); */ /* 0% black, 100% original image, values > 100% are allowed for brighter than original image. */
  /* display: none; */
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}
/* .intro-slideshow img:first-child {
  display: block;
  opacity: 1;
} */
.intro .intro-header {
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
  background-color: rgba(0,0,0,0.5);
}
.intro h1 {
  font-size: 4rem;
  margin-bottom: 0.75rem;
}
.intro p {
  font-size: 1.75rem;
}

@media (max-width: 700px) {
  html { font-size: 12px; }
  .intro-header { padding: 1.5rem 2rem; }
  .intro h1 { font-size: 2.5rem; }
  .intro p { font-size: 1.25rem; }
}

Implementing the Javascript Functionality

Finally, we’ll add the JavaScript code to control the slideshow. This code will handle the automatic transitioning of images at specified intervals.

const slideshowImages = document.querySelectorAll(".intro-slideshow img");

const nextImageDelay = 5000;
let currentImageCounter = 0; // setting a variable to keep track of the current image (slide)

// slideshowImages[currentImageCounter].style.display = "block";
slideshowImages[currentImageCounter].style.opacity = 1;

setInterval(nextImage, nextImageDelay);

function nextImage() {
  // slideshowImages[currentImageCounter].style.display = "none";
  slideshowImages[currentImageCounter].style.opacity = 0;

  currentImageCounter = (currentImageCounter+1) % slideshowImages.length;

  // slideshowImages[currentImageCounter].style.display = "block";
  slideshowImages[currentImageCounter].style.opacity = 1;
}

Conclusion:
Congratulations! You’ve successfully created a background image slideshow using Javascript. This simple yet effective technique can greatly improve the visual appeal of your web projects.