Menu
Coddy logo textTech

Clase Carousel

Lección 15 de 23 del curso Slider | Proyecto Front-end de Coddy.

challenge icon

Desafío

Fácil

En la clase wrapper, selecciona la clase carousel:

1. Establece el display en grid.

2. Establece grid-auto-flow en column.

3. Establece grid-auto-column en calc((100% / 3) - 12px).

4. Establece el desbordamiento (overflow) de x en auto.

5. Establece scroll-snap-type en x mandatory.

6. Establece el gap en 16px.

7. Establece el radio del borde (border radius) de tu elección.

8. Establece el comportamiento de desplazamiento (scroll behavior) en smooth.

9. Establece el ancho de la barra de desplazamiento (scrollbar width) en none.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Todas las lecciones de Slider | Proyecto Front-end