Horizontal Slider
Tags: html, css, design, webdev
Published: 2020-07-11 16:43:56

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

I have used [CodePen](codepen.io/) for this. You can also do it on [CodeSandBox](codesandbox.io) 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.
```html
<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.
```css
* {
	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. 
```css
.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
![Step 1](https://dev-to-uploads.s3.amazonaws.com/i/h147cjpfwbisnumz9aj5.png)

### 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:
```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.
![Step 2](https://dev-to-uploads.s3.amazonaws.com/i/9dgdx3xjmfpy80wsuzzh.png)

### 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.
```css
.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.
```css
.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 */
}
``` 
![Final](https://dev-to-uploads.s3.amazonaws.com/i/o3wf7aljg0ddpioeema6.png)
You can view the CodePen [here](https://codepen.io/chiragtutlani/pen/wvMXeoO).

I am a self-taught developer with undergrad in Physics. You can follow me on [GitHub](https://github.com/ChiragTutlani/) and [Twitter](https://twitter.com/chiragtutlani).
Happy Coding!!