Menu
Coddy logo textTech

Classe Carrossel

Lição 15 de 23 do curso Slider | Projeto Front-end da Coddy.

challenge icon

Desafio

Fácil

Na classe wrapper, selecione a classe carousel:

1. Defina o display como grid.

2. Defina grid-auto-flow como column.

3. Defina grid-auto-column como calc((100% / 3) - 12px).

4. Defina o overflow de x como auto.

5. Defina scroll-snap-type como x mandatory.

6. Defina o gap como 16px.

7. Defina o border radius de sua escolha.

8. Defina o scroll behavior como smooth.

9. Defina o scrollbar width como none.

Experimente você mesmo

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

Todas as lições de Slider | Projeto Front-end