Raddy The Brand Official Website

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/

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.

  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

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.