Background Image Slideshow using JavaScript

This code creates a Background Image Slideshow using JavaScript. It smoothly switches between images, adding visual charm to your website’s header. It’s an excellent way to make your site’s top section more captivating and dynamic.

You can use this code for various web projects where you want to implement a background image slideshow in the header or any other section of your website. It’s particularly suitable for personal blogs, portfolio websites, landing pages, and other web applications.

How to Create Background Image Slideshow Using Javascript

1. Begin by creating the HTML structure for your webpage. In this example, we’ll focus on the header section where the slideshow will be displayed. You can place the following code within the <body> tag of your HTML file:

<header class="intro">
  <div class="intro-slideshow">
    <img src="https://source.unsplash.com/1280x720/?coder">
    <img src="https://source.unsplash.com/1280x720/?coffee">
    <img src="https://source.unsplash.com/1280x720/?library">
    <img src="https://source.unsplash.com/1280x720/?path">
    <img src="https://source.unsplash.com/1280x720/?universe">
  </div>
  <div class="intro-header">
    <h1>Coding Journey</h1>
    <p>It's all about the journey</p>
  </div>
</header>

Replace the src attributes in the <img> tags with the URLs of the images you want to use in your slideshow.

2. Add the necessary CSS styles to achieve the desired layout and appearance. You can customize this according to your project’s design:

@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; }
}

3. Finally, add the JavaScript code to create the image slideshow effect:

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;
}

That’s all! You’ve successfully created a Background Image Slideshow using JavaScript. You can further customize this code to fit your website’s design and requirements. This engaging feature will make your website stand out and leave a lasting impression on your visitors.

If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	Simple Auto-Playing Image Slideshow
Author:	Coding Journey
Published:	January 19, 2024
Last Updated:	January 22, 2024
Downloads:	567

License:	MIT
Edit Code online:	View on CodePen

How to Create Background Image Slideshow Using Javascript

Similar Code Snippets:

Leave a Comment Cancel reply