How to Create a Netflix-Like Elementor Horizontal Scroll Section

No extra plug-ins required! Elementor Free Compatible.

This is how you can easily create a smooth horizontal 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.

Create Elementor Tabs With Horizontal Scroll For Mobile Users
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 '

Create a Netflix-Like Elementor Horizontal Scroll Section​
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.

This column will house the Elementor horizontal scroll content. It will work whether it is images, image boxes, icon boxes, paragraphs, and many other elements.

Create a Netflix-Like Elementor Horizontal Scroll Section​

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 >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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