Background Image Slideshow using JavaScript

Background Image Slideshow using JavaScript
Code Snippet:Simple Auto-Playing Image Slideshow
Author: Coding Journey
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 553
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X