Carousel with little to zero JavaScript using flexbox and overflow

Introduction

Carousel is one of the essential parts of modern web development.
We see it everywhere, and it is important to understand the mechanics. In this article, we discuss how to write one with minimal effort.

html

First of all, we need to write some HTML.

<div class="carousel-wrapper">
         <button class="left"> < </button>
         <div class="carousel">
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=1" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=2" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=3" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=4" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=5" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=6" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=7" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=8" />
            </div>
            <div class="item">
               <img src="https://via.placeholder.com/1000?text=9" />
            </div>
            <button class="right"> > </button>
         </div>
      </div>

our HTML code is fairly straightforward. it consists of our carousel-wrapper and three children. two of them are our button control(class=button) and the other one is the actual carousel with our items.

styling

We need to set the display of our carousel-wrapper to flexbox so we can have our buttons aligned horizontally next to the carousel items display:flexbox
Let's see all the properties on our stylesheet, and then we'll talk about them.

html {
   font-size: 62.5%;
}
body {
   box-sizing: border-box;
}
.carousel-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}
.carousel {
   width: 90vw;
   display: flex;
   overflow-x: scroll;
   scroll-behavior: smooth;
   /* use this property to hide the scrollbar on firefox */
   scrollbar-width: none;
}
/*  use this pseudo class to hide the scrollbar on chrome */
.carousel::-webkit-scrollbar {
   display: none;
}
.item {
   flex-basis: 20%;
   flex-shrink: 0;
   padding: 1rem;
}
.left,
.right {
   border: none;
   background-color: transparent;
   cursor: pointer;
   color: brown;
   font-size: 5rem;
   overflow: hidden;
   z-index: 100;
}
img {
   width: 100%;

}

There are two major properties On the carousel:display: flex overflow-x:scroll.
These properties help us achieve the carousel effect we need. I prefer using VW for width because it changes based on the viewport width, but it is optional, and you can choose any value you'd like.
scrollbar-behavior gives us a smooth scrolling experience. Firefox and Chrome have different behavior when it comes to hiding the default scroll bar, scrollbar-width:none works perfectly on Firefox and get rid of the scrollbar for us. For chrome, we need to use ::-webkit-scrollbar pseudo-class and set the display to none to get the same result.

flex-basis:20% practically tells the browser that every item should fill 20 percent of the flex container(.carousel) essentially it means showing five items each time based on the device size.
The default browser functionality is to shrink all items to fit the container, we have to set to zero flex-shrink:0 to make sure it doesn't shrink the items less than what we specified on flex-basis of flex-shrink is 1, we have to set to zero, so the browser doesn't shrink the items to fill the container.
The rest is self-explanatory.

javascript

our javascript code is short and simple. we want our buttons to have the functionality to scroll our scroll box, it can be achieved by the scrollleft property on the carousel element

let carousel = document.querySelector('.carousel');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let item = document.querySelector('.item');
(function () {
   right.addEventListener('click', function (e) {
      carousel.scrollLeft += item.clientWidth;
   });
   left.addEventListener('click', function () {
      carousel.scrollLeft -= item.clientWidth;
   });

The scroll moves as much as the item width when the buttons are clicked. You can change the value depending on how much you'd like the scroll to move.

The purpose of this article was to show how simple the carousel could be and there is no need for a big library and as the project grows we can add other functionalities like autoplay, indicators, ...

Follow me on twitter