horizontal scrolling Images like on Netflix

jquery html css menu scroll

21,510

Solution 1

If you do not have much experience then I would recommend you use a plugin such as Owl Carousel.

It can do pretty much everything that you want out of the box.

There are plenty of other options out there but this one does have touch support and is responsive as well so it's pretty good.

This blog post lists out lots of them (including Owl Carousel). You will probably get lots of others recommended by other users too.

When do you do have time I would also recommend trying to write your own carousel. It may seem like a waste of time with so many options out there but it really is a good way of enhancing your html, css and javascript.

Carousels are of my favourite example projects to help train junior developers at work.

Solution 2

Start with some basic CSS styling:

This will cover the basic look and feel of Netflix:

body {
background: #141414;
}
#hold_images {
display: inline-block; 
white-space: nowrap;
}
#icon_right {
right: 20; 
cursor: pointer;  
margin-top: -200px; 
position: fixed; 
}
#icon_left {
left: 20; 
cursor: pointer;  
margin-top: -200px; 
position: fixed; 
}
.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
img {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    cursor: pointer; 
}

Add a div to your body to hold the images:

<body>

<div id='hold_images'></div>

</body>

Use jQuery to handle the image and icon appending, image hovering, and smooth scrolling:

The images are captured screenshots saved to an img folder, and a library was used for adding the chevron icons but you can use whatever.

images = {
   "1" : "img/1.png",
   "2" : "img/2.png",
   "3" : "img/3.png",
   "4" : "img/4.png",
   "5" : "img/5.png",
   "6" : "img/6.png",
   "7" : "img/7.png",
   "8" : "img/8.png",
   "9" : "img/9.png",
   "10" : "img/10.png"
}

Object.keys(images).forEach(function(path) {
    $('#hold_images').append("<img class='my_img' width=200 height=400 src=" + images[path] + ">"); 
});

$('body').append("<i id='icon_right'></i>");
$('body').append("<i id='icon_left'></i>"); 
add_icon('#icon_right', 'fa fa-chevron-right', '40px', 'white');
add_icon('#icon_left', 'fa fa-chevron-left', '40px', 'white');

$(document).ready(function(){
    $('.my_img').hover(function() {
        $(this).addClass('transition');
    
    }, function() {
        $(this).removeClass('transition');
    });
});

$(document).on('click', '#icon_right, #icon_left', function() {
    if($(this).attr('id') == 'icon_right') {
        $('body').animate({scrollLeft: 1000}, 800);
        } else {
        $('body').animate({scrollLeft: -1000}, 800);
    }
});

Result:

21,510

Author by

Robert Münzinger

Updated on September 08, 2020

Comments

Robert Münzinger over 3 years

i'm trying to create a website with video content and i want to have a horizontal selection of cover pictures on the main page, like netflix does.

Which means lots of pictures which spread over the screen size and will scroll via mouseover arrows on the right / left side of the screen.

Screenshot:

http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg

Does anyone know how to create that? I'm using Dreamweaver and Muse, got some basic html and css skills, used a bit of jquery code, but i'm not quite firm with it yet.

Bye, Robert
Ridhwaan Shakeel over 3 years

where is the documentation for that add_icon(..) function?