Menu
Coddy logo textTech

Carousel-Klasse

Lektion 15 von 23 im Kurs Slider | Front-end-Projekt von Coddy.

challenge icon

Aufgabe

Einfach

Targetiere in der Klasse wrapper die Klasse carousel:

1. Setze display auf grid.

2. Setze grid-auto-flow auf column.

3. Setze grid-auto-column auf calc((100% / 3) - 12px).

4. Setze den Overflow von x auf auto.

5. Setze scroll-snap-type auf x mandatory.

6. Setze gap auf 16px.

7. Setze einen Border-Radius deiner Wahl.

8. Setze das Scroll-Verhalten auf smooth.

9. Setze die Scrollbar-Breite auf none.

Probier es selbst

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

Alle Lektionen in Slider | Front-end-Projekt