Raddy Website Design & Development Tutorials

Better Netflix Carousel using SwiperJS

By Raddy in CSS / JavaScript ·

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.

  1. John says:

    I’m seeing the videos display vertically in both Chrome & Firefox. Is there an error with the source code?

    1. Raddy says:

      Is that when you go fullscreen on mobile?

  2. Sebastian says:

    same problem: on ie11 it is vertically, in firefox it works.

    1. Raddy says:

      IE doesn’t support the flex property. The fix would be to remove everything display flex from .swiper-slide class name

  3. I’m getting the vertical error with chrome

    1. Raddy says:

      Can you share the code?

    2. I take it back i have fixed it i forgot to CDN to swiper thanks man

      1. Raddy says:

        I am glad that you managed to figure it out. Thanks for letting me know 🙂

  4. it’s blokes like you that save me hours of messing around reinventing you’re a true legend!!!

  5. Eki Baehaki says:

    Saya dari Indonesia. Terima kasih untuk tutorialnya. Sangat bermanfaat. Semoga sukses untuk karirnya.

  6. Sascha says:

    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?

    1. Raddy says:

      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!

  7. Alem says:

    is it possible to fetch data using axios or fetch instead of creating an array

    1. Raddy says:

      Yeah absolutely. Just fetch the data and populate the information.

  8. Agustin says:

    Muchas gracias, funciono!! Sigue asi, Te donaria pero no tengo dinero 🙁

    1. Raddy says:

      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í!

  9. Steve says:

    @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.

    1. Raddy says:

      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

        1. Raddy says:

          What do you mean, Anas?

  10. Tom says:

    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.

    1. Raddy says:

      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 ->

      1. Tom says:

        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!

        1. Raddy says:

          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”

  11. GAMER99USER7 says:

    Hello can you make a video how to make this slider responsive I hope you do it.

    1. Raddy says:

      Potentially yeah. All you need to do is add some breakpoints:

      // 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
      }

  12. Joseph says:

    Netflix using lazy loading of images so it won’t be heavy. Can you do this on your code too?

    1. Raddy says:

      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.

  13. 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

    1. Raddy says:

      Your paths were a little bit broken, you were 99% there. I pushed the code on GitHub

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.