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

Sections can be set to full width for a more seamless look.

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.

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 one is 3 columns, icon with 'leftarrow' class in the first column, middle column has class name 'horizontale', third column is the icon with the class name 'rightarrow'.

To center the left and right arrows, use the column 'vertical align' and 'horizontal align' settings.

You will understand all these instructions after going through the tutorial.

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.

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.

Even works with inner sections, so you can truly make anything scrollable.

WooCommerce Integration

Elementor Pro allows you to seamlessly integrate with the WooCommerce platform to create a functional store for your business.

Powerful Animations

Bring your site to life with the powerful animations features on Elementor pro.

Create a parallax scrolling effect, or wow your readers with the horizontal scrolling and 3D tilt as they navigate your pages.

Or, as on this page, use great Lottie animations.

Elementor Pro Popups

Do you want to take your marketing a notch higher?

The Popups feature allows you to achieve precisely that.

Grab your readers’ attention with the sleek and functional popups on Elementor Pro. You can even integrate the popups with your other marketing tools for even better results.

Amazing Theme Builder

Get the power to create everything on your site, right from the header, to the footer, and everything in between!

Seamlessly edit and create new archives templates, single posts designs, even 404 pages! 

Powerful Forms Creator

Every smart marketer knows what great power lies in forms.

With the powerful forms creator, you can easily integrate marketing tools such as MailChimp, HubSpot, ConvertKit, and Zapier (amongst others), to make your campaign even more effective.

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

Unless you want the arrows to be to the left and right of the horizontally scrollable column (as in one of the demos above).

In this case, add 3 columns, and add the class name 'horizontale' to the middle column. You will then add the arrow icons in column 1 and 3.

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 'inline' for every element.

Under the Advanced tab of each element.

Create a Netflix-Like Elementor Horizontal Scroll Section​

Note for inner sections: I added the code needed right in the CSS. No need to modify anything related to Positioning for them.

You will need to set specific width for the images, when set to inline. (Under the Style tab).

It might look better if they are all the same size. You can give these images a link.

Create a Netflix-Like Elementor Horizontal Scroll Section​

For most other elements, you will also need to specify their width, by adding this CSS under Advanced > Additional CSS.

selector *{
    max-width: 333px; /* Enter your desired width here */
}
Create a Netflix-Like Elementor Horizontal Scroll Section​

Important: Space your elements appart from each other using the margin setting, under Advanced, for each of them.

If you have elementor free, give your elements a class name, and use this code instead. More information in the Elementor Free custom CSS tutorial.

.classnamegiven *{
    max-width: 333px; /* Enter your desired width here */
}

Or even better for free users, or those who want this whole design as simple as possible, just fill your 'horizontale' column with inner sections, then add what you want there. It is just more simple that way.

After that, add a section right below the horizontal section, and add your arrow icons in it

Choose the icons you want. Give your left icon the class name 'leftarrow' , and the right icon the class name 'rightarrow'.

Create a Netflix-Like Elementor Horizontal Scroll Section​

Set both icon Position to Inline, then you will be able to use the column 'Horizontal Align' setting to position them.

Create a Netflix-Like Elementor Horizontal Scroll Section​
Create a Netflix-Like Elementor Horizontal Scroll Section​

Finally, add this code in an HTML element on the same page

<style>

.horizontale > div > div > div > div {
flex: 0 0 auto;
width: max-content;
}
.horizontale > div > .elementor-section {
min-width: max-content;
}
.elementor-widget-wrap .elementor-element.elementor-widget__width-auto, .elementor-widget-wrap .elementor-element.elementor-widget__width-initial {
    max-width: unset;
}
@media (max-width:1024px){
.horizontale > div > .elementor-section {
min-width: 100vw;
}
}

.leftarrow, .rightarrow{
cursor: pointer;
line-height: 0;
}
/* Remove default browser :focus styling */
.leftarrow:focus, .rightarrow:focus{
outline:0;
}
/* Replace focus styling with this for accessibility */
.leftarrow:focus .elementor-icon, .rightarrow:focus .elementor-icon {
transform: scale(1.04); /* Size of arrows when :focus state is active */
color: #000; /* Color of arrows when :focus state is active */
}

.horizontale > div {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
cursor: grab; /* Change to unset to have the normal cursor */
}

.horizontale > div::-webkit-scrollbar{
height: 14px; /* Change to 6px to make the scrollbar smaller, or to 0 to remove it */
}

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

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

.horizontale > div.active {
cursor: grabbing; /* Change to unset to have the normal cursor when mouse button is clicked down */
cursor: -webkit-grabbing; /* idem */
transform: scale(1.01); /* Size of elements when mouse button is clicked down */
}

/* Prevents clicking on links while navigating left or right */
.noclick{
pointer-events: none;
}
</style>

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

const leftArrow = document.querySelectorAll('.leftarrow');
const rightArrow = document.querySelectorAll('.rightarrow');

horizons.forEach( (horizon, i) => {
horizon.offsetWidth;
let scrollAmount = horizon.offsetWidth; /* Change this to 300 to scroll by 300 pixels on each arrow click, for example. As set, it scrolls the width of the elements shown */
window.addEventListener('resize',function(){
scrollAmount = horizon.offsetWidth; /* idem */
});

let smoothFunction = function(){horizon.setAttribute('style','scroll-behavior:smooth;')};
let clearBehavior = function(){setTimeout (function(){horizon.removeAttribute('style');},771)};

if(leftArrow[i]){
leftArrow[i].setAttribute('tabindex','0');
rightArrow[i].setAttribute('tabindex','0');

leftArrow[i].onclick = function () {
smoothFunction();
horizon.scrollLeft -= scrollAmount;
clearBehavior();
};
rightArrow[i].onclick = function () {
smoothFunction();
horizon.scrollLeft += scrollAmount;
clearBehavior();
};
}

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>

The code is commented out with all kind of useful information to style this the way you want! Read through it, and tune it to your needs!

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.

Note that with this mobile-only code, the arrows won't work.

<style>

@media (max-width:1024px){

.horizontale > div > div > div > div {
flex: 0 0 auto;
padding: 23px;/* add the padding here to space the elements */
width: max-content;
}
.horizontale > div > .elementor-section {
min-width: max-content;
}
.horizontale > div > .elementor-section {
min-width: 100vw;
}

.horizontale > div {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}

.horizontale > div::-webkit-scrollbar{
height: 0px; /* Change to 12 to make the scrollbar larger, or to 0 to remove it */
}

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

.horizontale > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
} /* Color of scrollbar thumb */
}
</style>

If for some reason the code is not working, you might have the older DOM from Elementor 2.x

You can verify here if that is the case... if you see 'default' or 'disabled' there, it probably is. Change to 'Active' for the code to work. Be aware though that it might break some other custom code elsewhere on your website.

Create a Netflix-Like Elementor Horizontal Scroll Section​

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

Special thanks to Darrell Johnson for sponsoring this tutorial!

Checkout his website,  Where Hip-Hop Lives around the World.