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 (exclusive to template customers)

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

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>

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​

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.

126 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. I would like to make this infinite as Elementor's version doesn't allow me to place dynamic links on the images in the slide. This is the whole reason I'm using this solution. Any idea to make it infinite?

      2. Sorry, this is not possible with that design. You are better using a slider in these cases. As for dynamic links, yes it makes it more complex. I could code a solution that would function the way you want but it would require some work. You can message me if interested.

    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 am setting this up on a new page, but it does not work fine.
      The elements aren't in a horizontal arrangement - they are vertically alligned.
      Scrollbar is visible and it seems to use the HTML code properly. DOM is active.....could you help?

      1. I found the answer in your other comments: Custom Positioning and a defined with was the solution to make it work. Thanks man!

    2. Shit, not completely solved: The Elements are alligned horizontically now, but each element got its own slider. If there are more element, than the viewport allows, they break to the next row.

    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!

    1. Hey Brian!

      It won't work in this particular case... overflow has to be set to 'scroll', otherwise, well, it will just overflow, and not scroll!

      You probably did this with a slider, where this was working... But with this design here it won't really work.

      Instead, you will need to have a left padding, and have the rest be essentially full width. That will replicate what you are after!

      So just make it full width, and add this CSS. The selector might need adjustment...

      .horizontale > div {
      padding-left:calc( ( 100% - 1140px ) /2 );
      }

  18. Hi and thanks for this wonderful code. i was looking for a solution to have all the images of my website in a horizontal scroll widget to give the viewer a quick overview of them.
    But is it possible to have a horizontal section with a gallery so i dont have to put the images inside one by one and also have a lightbox where you can click from one image to another.

  19. Hi Maxime, first of all thank you for the code snippets. Working nicely except that I have 5 collumns inside and at first sight there are 4 and halth visible. I'd like to see 3 and a half columns and 4th and 5th one reveals only when actively scrolling to right side. Which part of the code do I need to alter? Any hints?

    Cheers and thank you

  20. Forgot to mention I work with inner-section. My problem seems to be related with the column width not being able to set as high as I want since it calculates 1400 content width / 5 columns. In an ideal scenario each column would be around 400px width, which elementor kindly ignores, since it tries to fit it all in. Any ideas?

    This is how my custom class for each column is defined:

    .appartementbox {
    max-width: 416px !important;
    margin-right:30px;
    }

      1. solved it!
        you need to clarify one needs one inner-section for each column one wants. in my case its 5 inner-sections.
        thx though

      2. Indeed that might not have been clear enough! With inner sections, you need many of them!

        Cheers and thanks for sharing!

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

    This part is unforunately problematic for Safari / iphone users. It results in not smooth scrolling because safari still does not support the scroll-behavior:smooth; CSS rule. Do you have a solution for this?

    1. Hey Manuel!

      No I don't have a solution for this. I didn't notice it was a problem... I will have to check to see what happens there, and see if I can improve it.

      Do you know if a recent change to Safari might have caused problems that weren't there before?

    1. hi. i was having the same problem - then noticed that if i viewed the page from within wordpress, ie come out of elementor, then it worked fine. hope that helps

  22. Hey Maxime, any chance to adapt it for element that open a dropdown. Right now it has fixed height so if I open a selector the items remain in the fixed height and it doesn't adapt.
    Any advice on it?

  23. Hey Maxime, thanks for the tool. Unfortunately, the horizontal slide doesn't work on mobile. All columns are displayed one below the other. How does the slide work on mobile?

    1. Hey !

      Is it working in my examples, or is it broken?

      If it's working I suggest you get the template. It should be working fine there. Then replace the content with your own.

      Cheers!

  24. hi! i would like to buy this template, but how is it now with the new elementor 3.6. when column and sections is replaced with the new "container" ? will it work as containers?

    1. Hey Rickard!

      I will update the template soon with support for the container element.

      Also, keep in mind sections and columns aren't really being replaced. They will still work just fine...

      But yea, with the container available, it will be preferable to use that. I will update both the templates and tutorial with support for the container element, however first I'm waiting until it's at least somewhat stable. For just now, it's still very early.

      If you do buy the template, for now you will have the section & column version. When I will update it with containers instead, you will have that already, ready to download from your account. No need to purchase again or purchase something else.

      1. That sounds great i will get the template now and looking forward to the update when that comes. Thanks

  25. Hi,
    I've used your template and got it working however I want to use 3 inner section columns instead, how can i do this as it just displays them vertically instead.

    Do you have a template for 3 inner sections, I couldnt see it in the file i purchased.

    thanks

      1. Ahh I didn't think about changing the width in the mobile viewport for this section 🙁

        only question i have is how can I totally hide the scrollbar on mobile. I've set the height to 0 in the scrollbar css however on mobile as soon as you scroll a scrollbar appears.

        thanks again

  26. Hi
    I have another question, I've created a product grid for products, as you scroll across the size gets bigger. There are 6 columns and 6 products in the row. How can i fix this.
    Thanks again

Leave a Reply