How to Create a Netflix-Like Horizontal Scrolling Section

No extra plug-ins required! Elementor Free Compatible.

This is how you can easily create a smooth slider that doesn't automatically skips to the upcoming item. A la Netflix.

mobile icon 2
Home
mobile icon 3
Templates
mobile icon 4
Addons Review
mobile icon 5
Learning Center

< Share >

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on twitter
Twitter
Share on email
Email
Share on whatsapp
WhatsApp

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

mobile icon 6

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.

mobile icon 7

Finally, add this code in an HTML element on the same page where you want that section

<style>

.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;
cursor: grab;
}

.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.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(.98);
}

.noclick{
pointer-events: none;
}
</style>


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

horizons.forEach(hortizon => {

const links = hortizon.querySelectorAll('div > div > div');
hortizon.addEventListener('mousedown', (e) => {
isDown = true;
hortizon.classList.add('active');
startX = e.pageX - hortizon.offsetLeft;
scrollLeft = hortizon.scrollLeft;
});
hortizon.addEventListener('mouseleave', () => {
isDown = false;
hortizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
hortizon.addEventListener('mouseup', () => {
isDown = false;
hortizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
hortizon.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - hortizon.offsetLeft;
const walk = (x - startX) * 1.6 ;
hortizon.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.

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

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *