Better Netflix Carousel using SwiperJS
This is a remake of my first YouTube tutorial that I did showing you how to create a simple Netflix slider. This time I wanted to take it a step further by using a JavaScript framework called SwiperJS.
With SwiperJS you can do all sorts of things such as having automatically generated navigation, pagination, scrollbar, autoplay, parallax, lazy loading and so much more. It’s worth exploring the API or just watch the video below.
First of all, make sure you download SwiperJS from here: https://swiperjs.com/
UPDATE: Swiper container element now should have class swiper instead of swiper-container
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Netflix 1.1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../package/css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Demo styles -->
<style>
</style>
</head>
<body>
<!-- Swiper -->
<h1>NETFLIX</h1>
<div class="netflix-slider">
<h2>Popular on Netflix</h2>
<div class="swiper-container swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/2.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/3.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/4.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/5.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/6.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/7.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/8.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/9.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/10.jpg" alt="Movie Title"></div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="netflix-slider">
<h2>Continue watching...</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/2.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/3.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/4.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/5.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/6.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/7.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/8.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/9.jpg" alt="Movie Title"></div>
<div class="swiper-slide"><img src="img/10.jpg" alt="Movie Title"></div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="../package/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 6,
spaceBetween: 10,
slidesPerGroup: 2,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>SCSS
:root {
--swiper-theme-color: #fff;
}
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Update: Removed the Flex property - IE FIX */
}
img {
max-width: 100%;
height: auto;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
text-align: center;
}
.netflix-slider {
.swiper-wrapper {
padding: 20px 0;
}
.swiper-slide {
transition: 250ms all;
&:hover {
transform: scale(1.2);
z-index: 1;
}
&:first-child:hover{
margin:0 40px;
}
&:last-child:hover{
margin:0 -40px;
}
}
}Compiled CSS (if you need it)
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Update: Removed the Flex property - IE FIX */
}
img {
max-width: 100%;
height: auto;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: red;
text-align: center;
}
:root {
--swiper-theme-color: #fff;
}
.netflix-slider .swiper-wrapper {
padding: 20px 0;
}
.netflix-slider .swiper-slide {
-webkit-transition: 250ms all;
transition: 250ms all;
}
.netflix-slider .swiper-slide:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index: 1;
}
.netflix-slider .swiper-slide:first-child:hover {
margin: 0 40px;
}
.netflix-slider .swiper-slide:last-child:hover {
margin: 0 -40px;
}
/*# sourceMappingURL=styles.css.map */YouTube Question: How can you do this with an array of items?
First, let’s create a simple array that contains a movie title and imageUrl.
let movies = [
{title : "Inception", imageUrl: "add image url"},
{title : "Sons of Anarchy", imageUrl: "add image url"}
];To display the movies, we can loop through the array using a forEach loop. The data will be added to the result variable and then rendered on the screen using innerHTML. See example below:
function myFunction() {
let result = "";
movies.forEach(function (item) {
result += "<div class='swiper-slide'><img src='"+ item.imageUrl +"' alt='alt text'> " + item.title + " ";
});
document.getElementById("listMovies").innerHTML = result;
}
myFunction();Last, we need somewhere to output the information. In our case, we could do that by giving our div with the class name of swiper-wrapper an id of something like #listMovies.
<div id="listMovies" class="swiper-wrapper"> <div>
That’s it.
The download link is below, but feel free to copy and paste the code above – it’s the same thing.
Donations are appreciated, but not required.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
I’m seeing the videos display vertically in both Chrome & Firefox. Is there an error with the source code?
Is that when you go fullscreen on mobile?
same problem: on ie11 it is vertically, in firefox it works.
IE doesn’t support the flex property. The fix would be to remove everything display flex from .swiper-slide class name
I’m getting the vertical error with chrome
Can you share the code?
I take it back i have fixed it i forgot to CDN to swiper thanks man
I am glad that you managed to figure it out. Thanks for letting me know 🙂
it’s blokes like you that save me hours of messing around reinventing you’re a true legend!!!
Saya dari Indonesia. Terima kasih untuk tutorialnya. Sangat bermanfaat. Semoga sukses untuk karirnya.
Thank you!
This is really awesome!
But one question. i want to show just 2 or 3 columns on mobile view. actually there are 6.
if I add a “width:25% !important;” to “.swiper-slide ” the scrolling doesn’t work correctly.
Is there any solution for this?
Cause in my code there is added a “style=”width: 169.667px; margin-right: 10px;” to every .swiper-slide div?
Hi Sascha,
You can add breakpoints options like this:
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
Or you can do slidesPerView number or ‘auto’.
Example:
slidesPerView: 'auto'If you use it with “auto” value and along with loop: true then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)
I hope this helps!
is it possible to fetch data using axios or fetch instead of creating an array
Yeah absolutely. Just fetch the data and populate the information.
Muchas gracias, funciono!! Sigue asi, Te donaria pero no tengo dinero 🙁
Hey, don’t worry about it. I am glad that it worked and I appreciate you being here!
Oye, no te preocupes por eso. ¡Me alegro de que haya funcionado y agradezco que estés aquí!
@Raddy, how do you consider this version better than the CSS version you shared? This version doesn’t displace the thumbnails to the right/left of the thumbnail you’re hovering over, which is a major piece of making this look convincing. It could be modified further and maybe you cover that in the video, but your post doesn’t make mention of this.
Hey Steve,
The displacement should work on hover. This one is better for many reasons.
With SwiperJS you can do all sorts of things such as having automatically generated navigation, pagination, scrollbar, autoplay, parallax, lazy loading and so much more. It’s worth exploring the API or just watch the video
If you need any help, let me know 🙂
Raddy
wrong code
What do you mean, Anas?
Great stuff…and saved me a ton of time. I have one issue….for some reason my navigation arrows are centered vertically but not in the same horizontal space as the images. They are vertically centered based on the height of the screen. Resizing the screen moves the arrows up and down. So when I create multiple copies to get multiple rows of images, I get one set of arrows that (I believe) are sitting on top of each other.
I think that you only get one “prev” and “next” button per slider. You can create more, but I would assume that they will slide the full thing even if it’s on two rows. You might have to just create two sliders so they have separate controls:
So
<- Slider 1 ->
<- Slider 2 ->
I went back to the swiper website and inspected the base implementation. It looks like there is additional styling on the navigation taking place inside of the toolkit that uses the class name ‘swiper’ on the container that is inherited by the navigation. I added ‘swiper’ (no quotes) in the swiper-container class name and it worked as expected.
thanks again for the quick reply and putting this together!
Oh yeah, they recently updated the version. I will have to update the article
From the documentation:
“Swiper container element now should have class swiper instead of swiper-container”
Hello can you make a video how to make this slider responsive I hope you do it.
Potentially yeah. All you need to do is add some breakpoints:
// Responsive breakpointsbreakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
Netflix using lazy loading of images so it won’t be heavy. Can you do this on your code too?
You can add lazy loading fairly easy on this.
Here is a simple example:
To be fair, the tutorial needs a bit of an update. Maybe I can re-do it in the near future.
Hello,
I published my project on github pages, however the slider doesn’t work in any browser. Could you help me?
on vscode live-server it works, but on default server it doesn’t
link to website:
https://fcaspirro.github.io/netflix-clone/
link to repository:
https://github.com/Fcaspirro/netflix-clone
Your paths were a little bit broken, you were 99% there. I pushed the code on GitHub