Horizontal scrolling div with arrows using HTML and CSS

In this tutorial, we will learn how to create a horizontal scrolling div with arrows using HTML and CSS.

We can make a div horizontally scrollable using the overflow property in CSS.

To make div horizontally scrollable we have to use the x and y-axis properties. We have to set the overflow-y : hidden and make overflow-x:auto, this will hide the vertical scrollbar to hidden and make the div scroll horizontally.

So here, we will make a horizontal scrollable div one without arrows and another with arrows for navigation.

Horizontal Scrolling div using HTML and CSS

Here, we will code the div to make them scrollable horizontally.

Let’s first code our HTML page.

<div class="cover">
      <div class="scroll-images">
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
        <div class="child">
          <img class="child-img" src="img.jpeg" alt="image" />
        </div>
      </div>
    </div>

Here, we have a parent div with class="scroll-images" and inside it, we have child elements with class="child". And each child event has an image inside it.

Next, we will make the parent element (scroll-images) horizontally scrollable using CSS.

Let’s code the CSS now

.scroll-images {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.scroll-images::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa;
}

.scroll-images::-webkit-scrollbar-thumb {
  background-color: black;
}

.child {
  width: 120px;
  height: 100px;
  margin: 1px 10px;
  overflow: hidden;
}

Here, we have used display:flex in the parent div and made overflow-y:hidden and overflow-x: auto. This will make the div scroll horizontally.

We have set the flex-wrap:nowrap, so that it doesn’t wrap and is forced onto one line to maintain the horizontal scroll in mobile devices too.

The -webkit-overflow-scrolling: touch is used so that any mobile or touch-screen devices can use the momentum-based scrolling for the given element.

The ::-webkit-scrollbar is used to give color to the scrollbar.

And ::-webkit-scrollbar-thumbis used to give color to the scroll-thumb of the div.

Output:

Now let’s add the arrows on both sides of the horizontal parent div and code the functionality with some JavaScript.

Horizontal Scrolling element with arrows

To add the arrows on both sides we have to add some codes to our HTML.

First, we will add the arrow button on both sides of the element.

So we have to wrap the div (scroll-images) with another div with class=”cover” . Added both the left and right buttons on it.

<div class="cover">
    <button class="left" onclick="leftScroll()">Left</button>
   <div class="scroll-images">
           <!-- child elements -->
   </div>
   <button class="right" onclick="rightScroll()">Left</button>
</div>

The cover will be position:relative and the buttons will be position:aboslute to position them on both sides.

We have also added two functions with the click event on the button: leftScroll() and rightScroll().

.cover {
  padding: 0px 30px;
  position: relative;
}
.left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

Now, we have to code the function to navigate through the child elements in the horizontal div.

<script>
      function leftScroll() {
        const left = document.querySelector(".scroll-images");
        left.scrollBy(200, 0);
      }
      function rightScroll() {
        const right = document.querySelector(".scroll-images");
        right.scrollBy(-200, 0);
      }
</script>

The scrollBy() method scrolls an element by a given amount.

Syntax:

scrollBy(x-coord, y-coord)

When the left arrow is clicked the leftScroll() function is triggered and the element will move 200 on the x-axis and when the right arrow is clicked the element move -200 on the x-axis of the horizontal div.

Result:

Note:
If you don’t want to display the scrollbar below add this to your CSS code.
.scroll-images::-webkit-scrollbar {
   -webkit-appearance: none;
}

Complete Code: