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 most other ‘plain’ elements, like icon, image and icon boxes, video, even inner sections.

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

 

If you want to save yourself some trouble, just download the template, and swap the content with yours! 

Although you will want to read through, to understand how it all works.

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.

Works with the Posts element, with some extra CSS (provided below)

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.

Important: the slight layout shift you see in my examples (those with only images), when scrolling to the right, is because of how image lazy loading is implemented on this website. You will see in the template here that the behaviour is much better (no layout shift).

On your website, simply select a lazy loading that accurately calculates the image sizes to avoid this layout shift. It will also prevent other bugs such as anchor links scrolling to the wrong place.

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 {
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) => {

    let scrollAmount;
    
    if (horizon.querySelector('.elementor-posts-container')){
        
        let scrollPostContainerWidth = horizon.querySelector('.elementor-widget-container').offsetWidth;
    let scrollPostsAmount = horizon.querySelectorAll('article').length;
    let scrollPostWidth = scrollPostContainerWidth / scrollPostsAmount;
    
        scrollAmount = scrollPostWidth;
        
    } else {
        
        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 , needs to be same value as above */
});

    }

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.

@media (max-width:1024px){

.horizontale > 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;
}
.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 */
}

}

Add this code under Posts > Advanced > Custom CSS to make this work with the Posts elements

selector .elementor-grid{
    grid-auto-flow: column;
}
selector .elementor-grid article {
    width: 360px;
    padding: 30px;
}

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.

87 Responses

    1. It would be possible, but that is kind of not the point of that design... which was to get something different than what other elements already offer... and it would not play well with the horizontal scrolling bar (it would stay in the middle) ... if you want looping, go with the Elementor free and pro elements!

    1. Did you set the Custom Positioning of every element to 'Custom Width' , and then gave them a PX value? Is the CSS you added (form my code) being applied?

    2. Maxime Desrosiers hello sorry for the late answer. I finally designed my page in an other way but I'll check your recommandations.
      Thank you.

    1. I can help you! would you have a link to the page where you tried to implement this so that I can inspect and see what's the problem?

  1. This is great, thanks. Would be great if you could give me a hint how to make the elements centered in case they all show. I have a site with 3 fields only and want them to scroll on mobile. On desktop they all show, so I do not need the scroll and they should center. Currently they left allign and its seams to overwrite the section settings

    1. Hello Alexander! There is no simple way for this. You will have to either code it all in CSS, or create a new section for the desktop version!

  2. This is amazing. Thank you very much. It is really simple to make it centered. All you have to do is select the column, go to Layout -> Horizontal Align and select Center.

  3. Hi, everything is there but the scrolling does not work. I made sure to put the class as horizontale, I input the css in the same element text, and set the width to custom. Any idea why the scrolling won't work?

    1. You place the class on the column, and not the section? (comon error) , If Yes, and it is not working, I would need to see your page to know more about this and find the problem. You can message me by messenger.

  4. This is fantastic - was exactly what i was looking for.
    Arrows appreciated...and friends: Use the "column" section for the class-name 😉

    1. I helped Gala get this working in private... and I added a part to the article for the fix for those who are not yet using the optimized DOM output. See the end of the article...

  5. This is great and very usefull!
    However, I can make it work for dsktop to mobile, the mobile only doesn't work for me. The images got stacked.
    Anyway, I like the first method the most.
    I added something. I had only 6 icons and on desktop they were all visible but the were left aligned on desktop.
    I added margin: 0 auto in the first CSS rule to center them, looks much better 🙂

    1. Thanks Frank! I might need to update the code for mobile only... This code was working many updates ago, haven't verified since then.

      This whole article needs an update soon. I actually found a better way to make this, with a bit different code, that allows for different width inner items, and for the arrow navigation... coming soon hopefully.

  6. Hello, I'm trying all the ways but it don't show the elements in the same line, already checked all the things to do but elements after elements are not in the same line for the scroll. Can you please help me understand why? Thanks ????

  7. Thank you very much. This was very helpfull and I love the results!
    But still, I have a question. Why is the last element 'falling' down approximately by 19px? I just cant figure that out.

    1. problem has been solved, the cause is because I added a

      tag for custom text in the description of the image box content. thank you for the response

  8. Hi! That was working to me until yesterday, I update for the last version of Elementor (also activating 'optimized DOM output). I'd like to know if there is something I can do. Thank you!

    1. Francesco Caruso Change

      .horizontale > div > div > div > div

      at the start of the code, to

      .horizontale > div > div > div

  9. I'm using inner sections within the horizontale column, and they just show up stacked on top of each other. How would I make these inline in order for the scroll to work?

    1. Hey Tamara! I would need to see your webpage where you are testing this out... Share it here, or by private message, if you prefer!

  10. Hi! I did this, used inner sections inside the horizontale column, and used the CSS (only wanted the resource in mobile view). However, although it does work to make it horizontally scrollable, the height of the columns inside the inner sections is wrong, it compresses the content. Can you help me?

  11. Hi Maxime,
    Thanks for this tutorial.

    I'm usually good at this but I honestly don't know what to do with the CSS for mobile version only.
    Where do I put it? Do I still need the HTML widget and change the CSS code in there?

    I think this part of the tutorial is not very clear.

    Thank you for your help!

    1. (Maybe some screens of the whole page would help to understand where to put elements and which ones exactly. Because between section/column/element, it can be a bit confusing).

      1. Hi again,

        I finally managed it. But I still have an issue.
        I have one big image that I cut in 3 so I put them in 3 Image widgets to reform the big image. I set all of them "in line", and now the slider starts on the second image and won't slide left, so I see the image on the middle and the one on the right but not the one on the left.

        I want to keep the starting point on the middle image but I'd like to be able to slide left and right from this starting point.

      2. Yes, me again.
        I'm sorry for this 😉 (we can't edit comments so I have to post a new one).

        So, the starting point on the middle image was because I set the column to centered horizontal alignment. Now that I set it back to default, I see the 3 images starting from the left one.
        But I'd still like to start from the center and be able to scroll left and right.

        Thanks!

  12. Hi man, thanks a lot for your work.
    Question: I've placed some CTA within the column. I've used the CSS you mentioned for the width. But even though, it doesn't work properly on the front-end. They are super wide. Do you have a trick?
    thanks

      1. They look perfect to me ! Looks like you solved this already!

  13. Hello, I'm also having the same problem as Tamara above. I'm using inner sections and for mobile view the columns stack on top of each other. Is there a fix for this?

    1. Hey Chris! Thank you for your purchase of the template!

      Yes, this can be fixed. Add this CSS, right before the closing tag. Change the '900px' values to the width you prefer for the inner sections on mobile.

      @media (max-width:767px){
      .horizontale > div > .elementor-section.elementor-inner-section{
      width:900px;
      min-width:900px;
      }
      }

      You will also need to set the column width to the value you want, on mobile. Go to your inner sections Column Settings > Width > Mobile viewport, enter the % required. By default Elementor makes all columns 100% on mobile, so they will stack up. Change to 50% if you have two equal columns, 33% for three, etc.

  14. Hello, can I make this work for dynamic contents such as Elementor's post widget? How would I go around achieving that as the posts are usually displayed in a grid. I understand that I can use some plugins for dynamic post carousel, however most of them doesn't have the smoothness when scrolling like this solution.

    1. Hey! Add this code under Posts > Advanced > Custom CSS to make this work with the Posts elements

      selector .elementor-grid{
      grid-auto-flow: column;
      }
      selector .elementor-grid article {
      width: 360px;
      padding: 30px;
      }

      1. Hey Maxime,

        Thank you, I made it work somehow by changing the grid view, but I will try your solution as well. Thank you for taking the time to respond, appreciate it. =D

    1. Simply follow the exact same instructions, for another column, in another section!

      Except the part about adding the code to the page... it's only required one time on the page!

      1. Wauw! Fast reply! thanks! Done it, and works perfectly! Awesome 🙂

  15. Hello 🙂 Thank you for your work. This article and code was really helpful 🙂

    Unfortunately my arrows don't work :<

    Any suggestions on what might have gone wrong? 🙂

    1. Today I tried to do it again and followed everything step by step. It turned out that last time I pasted the whole code into the CSS in the "advanced" tab of the page and not in a HTML element as it was in your instructions. My mistake 🙂

      But I have a question. Is there a way to set the Scroll Amount the way that it scrolls to the next element? I know I can just set the scroll amount to the same px that is my element width, but I have different width for desktop and mobile.

      That would be helpful for displaying kind of a slider with posts from one category on mobile version. The post would be 100% width of the screen (or almost) and I'd like the arrows to display the next post.

      Is it something that can be done?

      Also, is there a way to set different scroll amounts for the desktop version and mobile version? 🙂

      I really appreciate you take time to answer our questions <3

      1. Hey Kinia!

        `That would be helpful for displaying kind of a slider with posts from one category on mobile version. The post would be 100% width of the screen (or almost) and I'd like the arrows to display the next post.`

        I added the code for exactly this! Just grab the code from the tutorial again,and it should work as you want.

        Cheers!

    1. Hey Chris!

      In the code provided, you will find:

      .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 */

      Replace with:

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

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

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

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

  16. Hi,

    This worked beautifully for elementor posts, is there some way to get it to work for addons as well? Such as ultimate addons elementor?

    I tried to adjust the CSS code but with no luck;

    selector .uael-post_body{
    grid-auto-flow: column;
    }
    selector .uael-post_body article {
    width: 360px;
    padding: 30px;
    }

    Currently it creates the scroll, but keeps the layout in a grid format.

    Thanks

    1. Indeed, with the right CSS it should work for addons as well. However I can't rework the codes provided in my tutorials for every addon out there! That would rather be custom work, you can message me if interested. Cheers!

      1. Thank you, completely understand. I'm having some trouble with the arrows however for elementor posts, I can only get them to work in the desktop responsive mode, and they scroll very little when clicked on. But the scrollbar works really well. Can you please help?

  17. Hey Maxime!

    When I change the horizontale > div overflow setting to hidden, Everything becomes unclickable. I would simply like to show part of the next items on the right while keeping the section content boxed. I've done this in the past with overflow-x: visible. Thanks!

  18. Hey Maxime!

    When I change the horizontale > div overflow setting to visible, Everything becomes unclickable. I would simply like to show part of the next items on the right while keeping the section content boxed. I've done this in the past with overflow-x: visible. Thanks!

Leave a Reply