This code implements a full-screen image slider using HTML, CSS, and JavaScript. The slider allows you to display a series of images with corresponding text in a visually appealing way. The slider’s main functionality is to cycle through the images and update the background image and text accordingly when the user clicks on the left or right buttons.
The slider utilizes gradient overlays and fade-in animations to enhance the visual experience. With this code, you can easily create an engaging image slider for your website or web application.
How to Create Full-Screen Image Slider With HTML CSS & JS
1. Let’s start by creating the basic HTML structure for our image slider. Open your preferred code editor and create a new HTML file. Inside the <body> tag, add the following code:
<main>
<div class="slider">
<div class="slider--content">
<button class="slider__btn-left">
<i class="fas fa-angle-left"></i>
</button>
<div class="slider--feature">
<h1 class="slider--title">Your Awesome Heading</h1>
<p class="slider--text"></p>
<button class="slider--btn">Get started</button>
</div>
<button class="slider__btn-right">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</main>
In this HTML structure, we have a <div> element with the class “slider” that will contain our slider content. Inside it, we have a left button, a section for the slider feature (title, text, and a call-to-action button), and a right button.
2. Add the following CSS code inside the <style> tag in the <head> section of your HTML file or link an external CSS file:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cd__main{
display: block !important;
height: 100vh;
width: 100%;
font-family: 'Open Sans', sans-serif;
background: #444 !important;
}
.slider {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
.slider--content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.slider--feature {
text-align: center;
}
.slider--title {
font-size: 2.5rem;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
.slider--text {
font-size: 1rem;
color: #fff;
text-transform: uppercase;
margin: 0.5rem 0;
}
.slider__btn-right,
.slider__btn-left {
background: transparent;
border: none;
outline: none;
font-size: 4rem;
color: #eee;
padding: 0 1rem;
cursor: pointer;
transition: transform 0.1s ease-in-out;
}
.slider--btn {
background: #fff;
text-transform: uppercase;
border: none;
color: #444;
border: 1px solid #444;
outline: none;
font-weight: 700;
padding: 0.8rem 2rem;
cursor: pointer;
}
.slider__btn-left:hover,
.slider__btn-right:hover {
transform: scale(0.95);
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 1s;
}
3. Finally, add the JavaScript code that will handle the functionality of our image slider. Place the following JavaScript code at the end of your HTML file, just before the closing </body> tag:
const slideContainer = document.querySelector('.slider');
const sliderText = document.querySelector('.slider--text');
const btnLeft = document.querySelector('.slider__btn-left');
const btnRight = document.querySelector('.slider__btn-right');
const sliderImages = [
{
src: 'https://source.unsplash.com/1280x720?girl',
text: 'Taste the magic'
},
{
src: 'https://source.unsplash.com/1280x720?rose',
text: 'Taste the incredible'
},
{
src: 'https://source.unsplash.com/1280x720?beauty',
text: 'Taste the dream'
}
];
let slideCounter = 0;
const startSlider = () => {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`;
sliderText.innerHTML = sliderImages[0].text;
};
btnRight.addEventListener('click', function() {
if (slideCounter === sliderImages.length - 1) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
), url(${sliderImages[0].src})`;
sliderText.innerHTML = sliderImages[0].text;
slideCounter = -1;
slideContainer.classList.add('fadeIn');
setTimeout(() => {
slideContainer.classList.remove('fadeIn');
}, 1000);
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter + 1].src})`;
sliderText.innerHTML = sliderImages[slideCounter + 1].text;
slideCounter++;
slideContainer.classList.add('fadeIn');
setTimeout(() => {
slideContainer.classList.remove('fadeIn');
}, 1000);
});
btnLeft.addEventListener('click', function() {
if (slideCounter === 0) {
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[sliderImages.length - 1].src})`;
sliderText.innerHTML = sliderImages[sliderImages.length - 1].text;
slideCounter = sliderImages.length;
slideContainer.classList.add('fadeIn');
setTimeout(() => {
slideContainer.classList.remove('fadeIn');
}, 1000);
}
slideContainer.style.backgroundImage = `linear-gradient(
to right,
rgba(34, 34, 34, 0.4),
rgba(68, 68, 68, 0.4)
),url(${sliderImages[slideCounter - 1].src})`;
sliderText.innerHTML = sliderImages[slideCounter - 1].text;
slideCounter--;
slideContainer.classList.add('fadeIn');
setTimeout(() => {
slideContainer.classList.remove('fadeIn');
}, 1000);
});
document.addEventListener('DOMContentLoaded', startSlider);
That’s all! hopefully, you have successfully created Full-Screen image slider with HTML CSS & JS. If you have any questions or suggestions, feel free to comment below.
