Raddy Website Design & Development Tutorials

Netflix Carousel using CSS

By Raddy in CSS ·

Check out the new version of the Netflix Carousel using SwiperJS – Read Article

This tutorial is going to demonstrate how to create a Netflix looking like Carousel just by using CSS3. I will be using an SCSS preprocessor to help me tidy things up, but don’t worry as conceptually it isn’t much different from standard CSS3.

The carousel is currently only created to work on Desktop, but it can be easily adapted for tablets and mobile just by doing some Grid or media queries tweaks.

The disadvantage of not using JavaScript is that the next and previous buttons will rotate with each section. Maybe we can fade out the arrows on the next version? If you fix that problem please comment below and I will update the article.

The first thing that we’ll have to do is to define our HTML5 structure. I am trying to keep everything fairly simple. So the structure goes:

Wrapper

The div with the class wrapper is where I explicitly define a grid with 3 columns and a width of 100%; It was just quicker to do it this way instead of inline blocks or floats.

Anchor Link

I’ve used normal links to anchor each section. Plain and simple, each link has an id that links to a section containing the same id.

Item

Each item contains an image and it’s part of a section grid that has 5 columns and width of auto.

Item Hover

To get the hover effect I’ve used “transform: scale (1.2)” and I’ve added a transition property to the item so we get that smooth animation.

Smooth Scrolling between sections

To get the smooth scrolling between each section I’ve used the “scroll-behaviour: smooth” property on the “.wrapper div and also HTML (as the transition didn’t work in some browsers).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>NETFLIX</h1>
<div class="wrapper">
  <section id="section1">
    <a href="#section3">‹</a>
      <div class="item">
        <img src="img1.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img2.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img3.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img4.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img5.jpg" alt="Describe Image">
      </div>
    <a href="#section3">›</a>
  </section>
  <section id="section2">
    <a href="#section1">‹</a>
      <div class="item">
        <img src="img6.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img7.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img8.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img9.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img10.jpg" alt="Describe Image">
      </div>
    <a href="#section3">›</a>
  </section>

  <section id="section3">
    <a href="#section2">‹</a>
      <div class="item">
        <img src="img11.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img12.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img13.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img14.jpg" alt="Describe Image">
      </div>
      <div class="item">
        <img src="img15.jpg" alt="Describe Image">
      </div>
    <a href="#section1">›</a>
  </section>
</div>
</body>
</html>

Create a folder with the name “css ” and inside this folder create a file called styles.scss

Make sure that you have your SCSS Pre-Processor working so it outputs a file with the name of styles.css. Alternatively, you can write normal CSS

$itemGrow: 1.2;
$duration: 250ms;

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000;
}

h1 {
  font-family: Arial;
  color: red;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3,100%);
  overflow:hidden;
  scroll-behavior: smooth;

  section {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, auto);
    margin: 20px 0;
    
    .item {
      padding: 0 2px;
      transition: $duration all;
      
      &:hover { 
        margin: 0 40px;
        transform: scale(1.2);
      }
      
    }
    
    a {
      position: absolute;
      color: #fff;
      text-decoration: none;
      font-size: 6em;
      background:rgb(0,0,0);
      width: 80px;
      padding: 20px;
      text-align: center;
      z-index: 1;
      
      &:nth-of-type(1) {
        top:0; bottom:0; left:0;
        background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
      }
      &:nth-of-type(2) {
        top:0; bottom:0; right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
      }
      
    }
    
  }
}

Conclusion

You can look at the full code below to get a better understanding of what is going on. 

Further improvements could be:

  • Make it mobile friendly
  • Have the back and forward arrows static
  • Add the play icon on each thumbnail on hover

See the Pen Netflix Carousel using CSS Beta1.0 by Radoslav Angelov (@Raddy) on CodePen.

Improved Version

This is a slightly improved version where I have added links inside the items and also heading and duration.

See the Pen Netflix Carousel with Links by Raddy (@Raddy) on CodePen.

  1. NETRA JAYAKUMAR says:

    please help me making it mobile friendly. I am trying to use the code in reactjs application.

    1. Raddy says:

      Hi,

      You can use the existing code and to add a media query for phones and adjust the size to whatever you like

      1. Wikner says:

        Made my day, been looking for this on YouTube, but clearly i was looking at the wrong place, came upon this link by chance while at work. Very informative, learned alot. Used up my lunch break for this, worth it ! Thanks alot !

        1. Raddy says:

          It sounds like your lunch break was well spent. Thank you, and I am glad that you found the article useful

  2. Shaun says:

    When i click on the next or prev slide the scrollbar jumps down, is it possible that it doesnt move the scrollbar on click?

    1. Raddy says:

      Hi Shaun,
      It might be best just to use the latest one that I did using SwiperJS. It’s a lot better, it works with touch and it’s actually easier to make and maintain. You don’t have to write any JavaScript, it’s literally a few options that you need to set.

      Here is the link:
      https://www.raddy.co.uk/blog/better-netflix-carousel-using-swiperjs/

  3. John says:

    Just like the SwiperJS version, the thumbnails are all showing up vertically in both FF & Chrome. I don’t see anything in the CSS that’s different from what you showed in the video that would cause that. Any ideas?

    1. Raddy says:

      Are you able to share the code?

  4. Thank you!
    I made Netflix clone Website using css and Html .
    with Discruption and source code
    https://www.trendonpedia.in/2020/07/netflix-homepage-design-using-html-and-css/

    1. Raddy says:

      Awesome bro, that’s really cool. Thanks for sharing

  5. Nathan says:

    Hi, I want to drop this into an alreaday created site. Inplace of another element. I’m a novice so am coming across probplems. Is there a nice easy step by step method? TIA

    1. Raddy says:

      All you have to do is copy and paste the HTML where you want it and add the CSS

  6. Steven says:

    thanks, really helpful!

    Is it possible to add text that is shown in front of each image? So let’s say you want to show the title and duration on top of the image. How do I need to do that?
    Thx!

    1. Raddy says:

      I am glad that you found it helpful!

  7. Steven says:

    Also, when making the images clickable with a href tags to point to the page with more details, the carousel gets completely distorted. What would be the correct way to make the images clickable?
    Thx!

    1. Raddy says:

      I have done a super quick example on Codepen:
      https://codepen.io/Raddy/pen/GRjYjKY

      It will require some work to get it to look nice. Basically, I had to change a few of the classes and then I added the href inside the items. There are many ways you can do that.

      I have an old video that shows you how to build cards with similar overlay and animations. Unfortunately, it’s a fairly long video, but feel free to check it out:
      https://www.youtube.com/watch?v=VPj8VPFRTeU

      1. Steven says:

        I see a problem when you put multiple carousels below each other. When you do this and then jump to a section in the top carousel, it does that perfectly but after that the arrows of the top carousel don’t work anymore to jump to other sections in the top carousel. Do you think this can be fixed?

        1. Raddy says:

          Unfortunately, that is the default browser behaviour when you click on an anchor link. You could try to figure out some javascript to stop that. I would suggest you use the SwiperJS method that is linked at the top of the article. It’s easier to do, it works with touch gestures and you can do so much more with it.

  8. Shalini Shenoy says:

    Instead of seeing the slider horizontal i can see it vertical. What do i do

    1. Raddy says:

      You can change the CSS path or run it on a local server. Live server in VSC should work

      1. Shalini Shenoy says:

        Still Doesnt work!

        1. Raddy says:

          Hey, send me your code or at least say what’s not working so I can better understand and help

          You can email me if you like. I am happy to help

          1. Shalini Shenoy says:

            I m sorry! didnt mean to be rude.. I have been trying to do this for a long time and its not working.. Can u give me ur mail id?

          2. Raddy says:

            Don’t worry, yes of course: hello@raddy.co.uk. We will figure it out 🙂

  9. Jumako says:

    I cant get it to work with more than 5 items

    1. Raddy says:

      You probably just need to change the number in “grid-template-columns: repeat(5, auto)” under the “section” selector

  10. Laura says:

    Hi ! Thank you so much for your work. I’m currently training in Ruby on Rails and i’d like to clone Netflix without using JS for now.
    i have all my data in a seed and i’m using a loop to display each movie. in html.erb i have
    movies.each do |movie| movie.title and the movie image in background-image.
    How can i use this code with different section ? can i create empty section first ?

    1. Raddy says:

      Hi Laura, I haven’t done any Ruby on Rails, but everything you said makes sense anyway. Ideally, it would be nice to use something like Swiper.js, but since you don’t want JS in your project I understand.

      Personally, I would just have the movies in a row and a few columns for each thumbnail and ignore the slider functionality as it’s not great. Since I am using a link to trigger the scrolling, if the slider is positioned slightly down your page you might get a jump to the top of the page on some browsers. I guess it’s the way anchor links work and if it’s empty it jumps to the top of the page.

      I think that you can still make it look super nice without the sliding and just by adding some CSS hover effects.

      To use it for different sections you can duplicate the sections and change the ID’s to them so they are unique. You need to have unique links names on the arrows too. It’s a bit of a pain, to be honest.

  11. Andy says:

    Hi Raddy,

    This is great and very helpful – I noticed for each section you have 5 images, but only 4 are appearing and the 5th seems to be hidden. For example, the 5th picture after Ted Bundy is not appearing and is hidden behind the picture called ‘Polar’. How do we fix this so all images are showing for all sections?

    1. Raddy says:

      I see what you are saying. If your screen is smaller it hides some of the thumbnails. You could make the thumbnails smaller or have them on two columns. Consider using a library like the SwiperJS as it’s going to make everything a lot easier and better

  12. DAR says:

    Hi! I tried running the CSS for your file, but for some reason the nested CSS on the wrapper and section part of the code is showing an error in my editor. What to do?

    1. Raddy says:

      What error do you get?

  13. about_lollo says:

    Hey Raddy,

    do you think something similar can be done with WordPress/elementor to display the posts of a blog like Netflix movie cards?

    I’m trying to wrap my head around it

    1. Raddy says:

      You can create a custom function or a plugin to do that. The function would have to go and grab the article data from the database and then you can use something like SwiperJs or Slick Slider to display it in a carousel. It would require a little bit of PHP to do the logic and CSS to make it look nice.

      Alternatively, I am sure that there are some plugins that you can use. Shame that Elementor Pro doesn’t have this feature.

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.