Originally posted on my blog
In this post, we will build a Fullscreen slider using HTML, CSS, and JavaScript.
You can check it live here
HTML
As you can see, we start by wrapping everything in the main tag.
<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">Tasty</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>
Then, hold the slider elements in the .slider class. We will also need two buttons to be able to go to the next or previous slide. The .slider--feature will hold the title and the description of the slide elements.
By the way, I use Font Awesome for the icons, so you will need to create an account here then add the link to the head tag.
CSS
As usual, we start the CSS by doing some resets.
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
font-family: 'Open Sans', sans-serif;
background: #444;
}
Then, change the background, the font family and import the font Open Sans from google fonts.
.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;
}
Afterwards, we use the .slider class to make the slide element using the full width and height of the viewport and prepare it to receive the image later as the background with the help of javaScript.
Then, set display:flex and justify-content:space-between to the .slider--content class to distribute equitably elements following the available space.
.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);
}
As you can see, this code block is used to style buttons. The .slider__btn-right and .slider__btn-left classes help us style the left and right button of the slide. We also use transition: transform 0.1s ease-in-out to make a little scale effect on hover with transform: scale(0.95). And the .slider--btn class is applied to the call to action button to have a nice style.
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 1s;
}
Here, we use @keyframes to apply a fade in animation to the slide element. And the .fadeIn class will be added to the slide dynamically when a change occurs.
JavaScript
As usual, we start the JavaScript part by selecting the needed elements.
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://drive.google.com/uc?id=1BzhhKeOc9XyZMPXnZAi_JiOYdZrwLYu-',
text: 'Taste the magic'
},
{
src: 'https://drive.google.com/uc?id=1M1TR1HjJCj-TuOa54jzty8QK9QUdNfSC',
text: 'Taste the incredible'
},
{
src: 'https://drive.google.com/uc?id=1twyebwsDDBtPiyFHxTIf9P26sDGiq5Qi',
text: 'Taste the dream'
}
];
let slideCounter = 0;
Then, we create an array of images that will be used as a background image for the slide. And also, declare the variable slideCounter to be able to count the number of slides.
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;
};
The startSlider() function will set the first image of sliderImages array as background to the slide. I also style the background with linear-gradient() to darken the image a little bit, and finally append the adequate text to the slide element.
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);
});
Here, we listen to a click event on the right button on the slide. Then, we check if the counter (slideCounter) is equal to the last slide. If it's the case, restart the slide with the first image and text of the array. Then, add the fadeIn class to animate the slide on entrance.
Afterwards, if the counter (slideCounter) is not equal to the last slide, we can set the next slide with the appropriate data and increment the slideCounter variable and finally remove the animation after 1 second to be able to animate it again.
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);
});
startSlider();
As you can see here, we use the same process to change the slide with the left button except for the fact that we check if the counter is equal to zero. And if it's the case, go to the last slide. Then, if not, go the previous slide and decrement the counter variable.
And finally, start the slider with the startSlider() function.
You can check it live here
Top comments (5)
You should check Spectre CSS, tiny 9kb CSS that makes this stuff, without JS.
Thanks Juan for your suggestion, i will give it a try. But it's always good to practice these kind of things without framework or third library.
Or we can take some time and make it ourselves with css. That should be fun
Thanks Ibrahima,
Good stuff
FYI Codepen example is not loading images
Images are fetched from my google drive, and they are high quality that's why they take time to load. So, you can change them with yours if you want. And thanks again for your comment.