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:
![Read More and Read Less using JavaScript]()
Read More and Read Less using JavaScript
![Clone List Element using JavaScript]()
Clone List Elements using JavaScript
![SVG Cubic Bezier Curve Generator in JavaScript]()
SVG Cubic Bezier Curve Generator in JavaScript
![Accessible Vertical Tabs in JavaScript]()
Accessible Vertical Tabs in JavaScript
![JavaScript Custom Cursor with Icon and Text]()
JavaScript Custom Cursor with Icon and Text
![Pure JavaScript QR Code Generator]()
Pure JavaScript QR Code Generator
![JavaScript Piano Keyboard App]()
JavaScript Piano Keyboard App
![JavaScript Check if Image is Portrait or Landscape]()
JavaScript Check if Image is Portrait or Landscape
![Simple Currency Converter in JavaScript]()
Simple Currency Converter in JavaScript
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.