Get Premium

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.

Elementor Netflix Like Horizontal Scroll Section Template 1

Elementor Netflix Like Horizontal Scroll Section Template

This download gets you the following templates :

Elementor Netflix Like Horizontal Scroll Template (Old Sections)

Elementor Netflix Like Horizontal Scroll Template (Containers)

Related tutorial : Elementor Netflix Like Horizontal Scroll Section

 

Exclusive features when you get the downloadable template:

  • You get a 'section' version, and a 'container' version of the template.
  • You get Elementor Posts element compatibility
  • You get Elementor Basic Gallery compatibility
  • You get Elementor Pro Popups compatibility

 

Create a Netflix-Like Elementor Horizontal Scroll Section​ 16
Create a Netflix-Like Elementor Horizontal Scroll Section​ 17
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 19
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 21
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25

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

Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 19
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 21
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25

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.

Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 43
Create a Netflix-Like Elementor Horizontal Scroll Section​ 19
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 48
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25

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.

Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 43
Create a Netflix-Like Elementor Horizontal Scroll Section​ 19
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 48
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25

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.

Create a Netflix-Like Elementor Horizontal Scroll Section​ 17
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 19
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 21
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 23
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25
Create a Netflix-Like Elementor Horizontal Scroll Section​ 18
Create a Netflix-Like Elementor Horizontal Scroll Section​ 25

Works with the Posts element, with some extra CSS (exclusive to template customers)

Works with the Basic Gallery element, with some extra CSS (exclusive to template customers)

Even works with containers directly as horizontal scroll content, 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.

  • Create your single product pages
  • Create your product archives pages

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.

View Pricing

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.

The above isn’t exactly what you are looking for? Check out this related premium tutorial:

 

Elementor Full Screen Horizontal Scroll on Scroll Containers

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​ 98
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​ 99

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​ 100

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

<script> 
/* Please login to get the code 
 * The code will be for the Create a Netflix-Like Elementor Horizontal Scroll Section​ tutorial 
 * Found at this URL https://element.how/elementor-horizontal-scroll-section/ 
 */ 
</script>
Create a Netflix-Like Elementor Horizontal Scroll Section​ 101

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.

<script> 
/* Please login to get the code 
 * The code will be for the Create a Netflix-Like Elementor Horizontal Scroll Section​ tutorial 
 * Found at this URL https://element.how/elementor-horizontal-scroll-section/ 
 */ 
</script>

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​ 102

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

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

For sections and columns

<script> 
/* Please login to get the code 
 * The code will be for the Create a Netflix-Like Elementor Horizontal Scroll Section​ tutorial 
 * Found at this URL https://element.how/elementor-horizontal-scroll-section/ 
 */ 
</script>

For containers

In the case of containers, instructions are the same, except the class ‘horizontale’ is added to the container element.

Only thing to be careful about is that the container needs to be set to full width. If you need it boxed, just add it inside a boxed container.

<script> 
/* Please login to get the code 
 * The code will be for the Create a Netflix-Like Elementor Horizontal Scroll Section​ tutorial 
 * Found at this URL https://element.how/elementor-horizontal-scroll-section/ 
 */ 
</script>

Code is heavily modified and adapted from this codepen.

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

}

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​ 105

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.

Tagged

159 Responses

  2. I purchased this awesome template and have been using it with great success. Thank you for providing such a valuable resource.

    I am currently trying to replicate the smooth, auto-scrolling image carousel featured on the Apple Store homepage (https://www.apple.com/store) using Elementor. Could you kindly offer any advice or guidance on how to customize your template to achieve this Apple-style carousel effect? Especially, the half off-canvas horizontal scroll sections.

    I would greatly appreciate your insights and any additional customization tips you can share.

    Thank you for your time and assistance.

    Best regards,
    Shohei

    1. Greetings Shohei,

      What do you mean by auto-scrolling? I don't see any auto scrolling...

      Otherwise, the rest can be replicated. You just have the replicate the styling like what they have. The content inside would be either containers or a loop grid.

      Set a left padding like this:

      calc( (100vw - 1140px) / 2 )

      Where 1140px is your default boxed width.

      Cheers!

  3. Hi Maxime,

    Thank you for your quick response. To clarify what I meant by "auto-scrolling," I have recorded a short video showing the exact scroll behavior I'm trying to replicate from the Apple Store page.

    You can view it here: https://www.loom.com/share/15e5bbe9025c4403af4671f3486fa035?sid=b610eefc-ae9a-4002-95e5-c7feeb31ec86

    Also, I tried setting the box width to 1140px as you suggested, but I noticed that the content on the right side gets cut off. Is there a way to keep the layout full-width and only apply padding to the left side, without affecting the right?

    I appreciate your help!

    Best regards,
    Shohei

    1. Greeting Shohei,

      'I tried setting the box width to 1140px as you suggested'

      I didn't suggest that though. You keep the layout full, but you set a padding left like I described. In the calculation, your boxed width is required.

      As to auto scrolling, you mean it scrolls when clicking on the arrows? My tutorial does that too...

      Cheers!

  4. Hello,

    I got it mostly working, but I wonder if you can use multiple scroll buttons?

    The current setup I have is that I hid the Desktop and Tablet buttons on mobile and created new ones for Mobile (they weren't in the correct place on mobile), but the mobile ones don't seem to work even though I put 'leftarrow' and 'rightarrow' in the 'CSS Classes'.

    Let me know if this is possible.

    Thanks!

  5. A solution with Crocoblocks listing grid would be great, they have a Scrolling function but it doesnt work with horizontale / arrows, maybe an addition here?

    1. Greetings Mehmet!

      In this case I would suggest switching the single loop template to a native Elementor Loop template, and using the Elementor Loop Grid to show the posts.

      Cheers!

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close