CloseBetter 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/
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">
<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.
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: hello@raddy.co.uk
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