How to Create a Netflix-Like Horizontal Scrolling Section

No extra plug-ins required! Elementor Free Compatible.

This is how you can easily create a smooth slider that doesn't automatically skips to the upcoming item. A la Netflix.

This particular tutorial will work the normal image element. It will also work with many other 'plain' elements, like icon, image and icon boxes, video, etc.

It will not make an image carousel change it's behavior though. Just use many image elements, as in the example below.

How to Create a Netflix-Like Horizontal Scrolling Section​ 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

To begin with, create a new section with one column, and give that column the class ' horizontale '

How to Create a Netflix-Like Horizontal Scrolling Section​ 12
Give the class to the column

Then, add all of your elements in that column. Set custom positioning to 'custom' for every element.

For images, it will look better if they are all the same size. You can give these images a link.

How to Create a Netflix-Like Horizontal Scrolling Section​ 13

Finally, add this code in an HTML element on the same page where you want that section

<style>

.horizontale > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}

.horizontale > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
cursor: grab;
}

.horizontale > div > div::-webkit-scrollbar{
height: 4px;
}

.horizontale > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

.horizontale > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

.horizontale > div > div.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(.98);
}

.noclick{
pointer-events: none;
}
</style>


<script>
document.addEventListener("DOMContentLoaded", function(event) {
const horizons = document.querySelectorAll('.horizontale > div > div');
let isDown = false;
let startX;
let scrollLeft;

horizons.forEach(horizon => {

const links = horizon.querySelectorAll('div > div > div');
horizon.addEventListener('mousedown', (e) => {
isDown = true;
horizon.classList.add('active');
startX = e.pageX - horizon.offsetLeft;
scrollLeft = horizon.scrollLeft;
});
horizon.addEventListener('mouseleave', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mouseup', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - horizon.offsetLeft;
const walk = (x - startX) * 1.6 ;
horizon.scrollLeft = scrollLeft - walk;
for (var i = 0; i < links.length; i++) {
links[i].classList.add('noclick');
}
});
});
});
</script>

Important: Adjust the width value at the beginning of the code to match the custom width you entered
Also adjust the padding to space the elements

This design will work for desktop and mobile. If you want to use this only for a mobile section, use the CSS below instead of the code above.

.horizontal > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}

.horizontal > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
}

.horizontal > div > div::-webkit-scrollbar{
height: 4px;
}

.horizontal > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

.horizontal > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

.horizontal > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/

}

.horizontal > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
}

.horizontal > div > div::-webkit-scrollbar{
display:none;
}

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *