Netflix Like Hover Carousel In Pure CSS – flix-carousel

Category: CSS & CSS3 , Recommended , Slider | September 19, 2018
Author: anthonykrivonos
Views Total: 363
Official Page: Go to website
Last Update: September 19, 2018
License: MIT

Preview:

Netflix Like Hover Carousel In Pure CSS – flix-carousel

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;

}

Leave a Reply