Netflix como Hover carrusel en Pure CSS-Flix-Carousel

Vista prévia

Descripción

Flix-Carousel es una librería CSS pura para crear un carrusel interactivo inspirado en Netflix.

Funcionamiento

Descargue e inserte la hoja de estilos ' Carousel. css ' en el encabezado del documento.

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

Añadir mosaicos al carrusel siguiendo la estructura HTML:

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

Personalice el carrusel flotante reemplazando las variables predeterminadas.

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

}