Netflix Like Hover Carousel In Pure CSS – flix-carousel

Preview:

Description:

flix-carousel is a pure CSS library to create an interactive hover carousel inspired by Netflix.

How to use it:

Download and insert the stylesheet ‘carousel.css’ in the header of the document.

<link href="src/carousel.css" rel="stylesheet">

Add tiles to the carousel following the HTML structure:

<div class="carousel">
  <div class="carousel-row">
    <div class="carousel-tile">Tile 1</div>
    <div class="carousel-tile">Tile 2</div>
    <div class="carousel-tile">Tile 3</div>
    <div class="carousel-tile">Tile 4</div>
    <div class="carousel-tile">Tile 5</div>
    ...
  </div>
</div>

Customize the hover carousel by overriding the default variables.

:root {
  /* Tile Dimensions */
  --carousel-tile-spacing: 10px;
  --carousel-tile-width:   250px;
  --carousel-tile-height:  calc(var(--carousel-tile-width) / (16 / 9));
  /* Growth Factor */
  --carousel-growth-factor: 1.5;
  /* Fade to Opacity */
  --carousel-fade-opacity:   0.25;
  --carousel-normal-opacity: 1;
  /* Automatic Offsets - DO NOT ALTER */
  --carousel-offset-left:  calc(-1 * (var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1) / 2));
  --carousel-offset-right: calc(var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1));
  /* Transition Speeds */
  --carousel-transition-1: 1s;
  --carousel-transition-2: 0.5s;
  --carousel-transition-3: 0.3s;
}