The humble carousel (or “slider”) is a common feature on websites but it’s not always the most straightforward thing to build.
In this tutorial, we’ll build a very simple carousel using vanilla JavaScript. So simple, in fact, that it requires less than 15 lines of JavaScript code.
This sort of implementation is perfect for a basic website and it’s also a highly performant way of displaying content in a presentable manner. Once you’ve built these slides, you can add whatever content you want to them; text, images, video, you name it.
Here’s a look at the finished carousel we’ll be building–4 simple colored slides:
Let’s get started!
1. Place the Content With HTML
Let’s define the structure of our slider using HTML. We’ll be placing some slides in a container and some buttons to control the slider so the layout will look like this:
<section class="slider-wrapper">
<button class="slide-arrow" id="slide-arrow-prev">
‹
</button>
<button class="slide-arrow" id="slide-arrow-next">
›
</button>
<ul class="slides-container" id="slides-container">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</section>
We define our slides-container and slides with the ul and li tag respectively for accessibility reasons.
2. Style the Carousel With CSS
Now we’ll style our slider. To keep this demo as simple as possible, I’ll be styling the slides with background colors only but, as mentioned previously, any element can be placed in the carousel (images, text, videos etc.).
The first thing we’ll do is style our slider-wrapper, slides-container and slide classes.
The slides container will have overflow:scroll and display:flex properties to display all the slides on a single row while its parent container, the slider wrapper, will have an overflow-hidden property. This allows us to scroll through the slides in the container while still staying in the width of the page.
We’ll also need to override the default styling for the ul tag. And then we’ll set the slides to the full width and height of the slides container.
.slider-wrapper {
margin: 1rem;
position: relative;
overflow: hidden;
}
.slides-container {
height: calc(100vh - 2rem);
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
overflow: scroll;
scroll-behavior: smooth;
}
.slide {
width: 100%;
height: 100%;
flex: 1 0 100%;
}
We’ve set the slides-container height as calc(100vh-2rem) to offset the 1rem margin on the top and bottom from the slider-wrapper.
Allow for Smooth Scrolling
Another important property to note is the scroll-behaviour on the slides container class. This is the property that allows the container to scroll smoothly to the next slide instead of it moving instantly.
This is what our carousel would look like without scroll-behaviour: smooth
Scrollbar, or No Scrollbar?
Optionally, we can choose to hide the scroll bar on our slidesContainer. The scrollbar is present in the demo but we could remove it by adding:
.slides-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
/* WebKit */
.slides-container::-webkit-scrollbar {
width: 0;
height: 0;
}
Style the Carousel Buttons
Finally, we’ll style our carousel buttons. We’ll set an opacity property on the buttons so they’re slightly transparent and solid on hover or focus:
.slide-arrow {
position: absolute;
display: flex;
top: 0;
bottom: 0;
margin: auto;
height: 4rem;
background-color: white;
border: none;
width: 2rem;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
}
.slide-arrow:hover,
.slide-arrow:focus {
opacity: 1;
}
#slide-arrow-prev {
left: 0;
padding-left: 0.25rem;
border-radius: 0 2rem 2rem 0;
}
#slide-arrow-next {
right: 0;
padding-left: 0.75rem;
border-radius: 2rem 0 0 2rem;
}
3. Add Slider Functionality With JavaScript
Time to put the fun in functional! There are two parts of logic involved in this slider:
- Displaying the next slide when the forward arrow is clicked
- Displaying the previous slide when the backward arrow is clicked
First, get all the elements we need for the slider:
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
Now that’s done, we’ll handle moving the slider. We can decide how the slider container moves by using the scrollLeft property.
“The
Element.scrollLeftproperty gets or sets the number of pixels that an element’s content is scrolled from its left edge.”- MDN
Since we want to display the next slide when the forward arrow is clicked, that means we’ll need to scroll the slidesContainer to the left by the width of one slide.
nextButton.addEventListener("click", (event) => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft += slideWidth;
});
Breaking down what’s happening in this code:
- We add the click event listener to the next button
- When the button is clicked, we get the width value of one slide
- We increase the
scrollLeftproperty of theslidesContainerby theslideWidth.
We can apply this same logic to the backward arrow button but with one small tweak:
prevButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft -= slideWidth;
});
With this method, instead of adding to the scrollLeft property, we subtract from it by the width of a slide. This allows us move backwards when the back arrow is pressed.
All the Code
Putting the entire JavaScript code together gives us, as promised, a functional slider with less than 15 lines of JavaScript.
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
nextButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft += slideWidth;
});
prevButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft -= slideWidth;
});
Conclusion
And that’s about it for the carousel.
Of course, it’s possible to extend this implementation to include several features like pagination or snap-to-slide but for the purpose of this tutorial, we’ll stop here. If you’re looking for slightly more complicated implementations, check out this article:
No comments:
Post a Comment