MenuMenu CloseClose

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 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 button 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 a 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).

HTML 

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

<h1>NETFLIX</h1>
<div class="wrapper">
  <section id="section1">
    <a href="#section3">‹</a>
      <div class="item">
        <img src="img1.jpg"/>
      </div>
      <div class="item">
        <img src="img2.jpg"/>
      </div>
      <div class="item">
        <img src="img3.jpg"/>
      </div>
      <div class="item">
        <img src="img4.jpg"/>
      </div>
      <div class="item">
        <img src="img5.jpg"/>
      </div>
    <a href="#section3">›</a>
  </section>
  <section id="section2">
    <a href="#section1">‹</a>
      <div class="item">
        <img src="img6.jpg"/>
      </div>
      <div class="item">
        <img src="img7.jpg"/>
      </div>
      <div class="item">
        <img src="img8.jpg"/>
      </div>
      <div class="item">
        <img src="img9.jpg"/>
      </div>
      <div class="item">
        <img src="img10.jpg"/>
      </div>
    <a href="#section3">›</a>
  </section>

  <section id="section3">
    <a href="#section2">‹</a>
      <div class="item">
        <img src="img11.jpg"/>
      </div>
      <div class="item">
        <img src="img12.jpg"/>
      </div>
      <div class="item">
        <img src="img13.jpg"/>
      </div>
      <div class="item">
        <img src="img14.jpg"/>
      </div>
      <div class="item">
        <img src="img15.jpg"/>
      </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

SCSS 

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

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

Tags: , , , , ,
  1. NETRA JAYAKUMAR ·
    17th October 2019 8:45 pm

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

    → Reply
    • Raddy ·
      21st October 2019 2:25 pm

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

      →
  2. Shaun ·
    21st April 2020 10:14 am

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

    → Reply
    • Raddy ·
      21st April 2020 10:51 am

      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/

      →