Horizontal Slider

Chirag Tutlani — Sat, 11 Jul 2020 16:43:56 +0000

We are going to create horizontal slider of items, just like an image carousel but continuous.

I have used CodePen for this. You can also do it on CodeSandBox if you like. First let's set up the basic project.

Setting up the basics

We start by creating a h1 and a div element (with class wrapper). The div element will contain several items (here 5). Each item has a title and some random text. Note that there is a empty div element with class empty at the end. I will explain its use at the end.



<h1>Horizontal Scrollable Items</h1>
  <div class="wrapper">
    <div class="item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing  elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="item">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="empty"></div>
</div>

For css, we are going to set box-sizing to border-box and specify font-family to every element, and a background color. We have also aligned heading to the center.



* {
    box-sizing: border-box;
    font-family: 'Source Sans Pro', sans-serif;
}

body {
    background-color: #f0f4a6;
}

h1 {
    text-align: center;
}

Next up add the following css. Here on .wrapper element we are defining its background color, height, width, margin (0 on top and bottom, auto on left and right to center-align it), overflow-x (scroll to enable horizontal scrolling), overflow-y (hidden to disable vertical scrolling). Note that these are defined on .wrapper element so to change div element's scrolling. For .item element we define padding, height, width and border-radius.



.wrapper {
    background-color: #0E1318;
    width: 500px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 0 auto;
}

.item {
    background-color: #00D9E1;
    padding: 0 10px;
    height: 240px;
    width: 250px;
    border-radius: 5px;
}

And we get the following output

Make items align horizontally

As you can see the items are vertically arranged but we cannot scroll (that's because we have set overflow-y to hidden)
Next up we will make the items horizontally aligned and align them with respect to main div element. For this make the following changes to css:



.wrapper {
    /* add this at the end */

    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 0 50px;

    padding: 30px 60px;
    padding-right: 0;        
}

We are almost done! We have the items which can be scrolled horizontally. All of them of nicely aligned and spaced. But there is still one small issue. If you scroll till the end you will see there isn't much space after the last element and that's where the .empty div will be used.

Creating an empty space after the last element

Remember that we added padding (padding-left) of 60px and there is already a grid-gap of 50px in between two columns. So all we need now is a transparent element of 10px at the end.



.empty {
    width: 10px;
}

Hoorayy! This completes our horizontal slider of items. To enhance it more I would add border-radius to .wrapper element and remove the scrollbars.



.wrapper {
    /* Add this at the end */

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  border-radius: 10px;
}

.wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

You can view the CodePen here.

I am a self-taught developer with undergrad in Physics. You can follow me on GitHub and Twitter.
Happy Coding!!

Forem: Chirag Tutlani

Horizontal Slider

Setting up the basics

Make items align horizontally

Creating an empty space after the last element