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.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
To begin with, create a new section with one column, and give that column the class ' horizontale '
Then, add all of your elements in that column. Set custom positioning to 'custom' for every element.
For images, it will look better if they are all the same size. You can give these images a link.
This column will house the Elementor horizontal scroll content. It will work whether it is images, image boxes, icon boxes, paragraphs, and many other elements.
Finally, add this code in an HTML element on the same page where you want that section
<style>
.horizontale > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}
.horizontale > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
cursor: grab;
}
.horizontale > div > div::-webkit-scrollbar{
height: 4px;
}
.horizontale > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}
.horizontale > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}
.horizontale > div > div.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(.98);
}
.noclick{
pointer-events: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const horizons = document.querySelectorAll('.horizontale > div > div');
let isDown = false;
let startX;
let scrollLeft;
horizons.forEach(horizon => {
const links = horizon.querySelectorAll('div > div > div');
horizon.addEventListener('mousedown', (e) => {
isDown = true;
horizon.classList.add('active');
startX = e.pageX - horizon.offsetLeft;
scrollLeft = horizon.scrollLeft;
});
horizon.addEventListener('mouseleave', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mouseup', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - horizon.offsetLeft;
const walk = (x - startX) * 1.6 ;
horizon.scrollLeft = scrollLeft - walk;
for (var i = 0; i < links.length; i++) {
links[i].classList.add('noclick');
}
});
});
});
</script>
Important: Adjust the width value at the beginning of the code to match the custom width you entered.
Also adjust the padding to space the elements.
This design will work for desktop and mobile. If you want to use this only for a mobile section, use the CSS below instead of the code above.
.horizontal > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}
.horizontal > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
}
.horizontal > div > div::-webkit-scrollbar{
height: 4px;
}
.horizontal > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}
.horizontal > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}
.horizontal > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}
.horizontal > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
}
.horizontal > div > div::-webkit-scrollbar{
display:none;
}