מחלקת הקרוסלה

שיעור 15 מתוך 23 בקורס סליידר | פרויקט Front-end של Coddy.

אתגר

קל

במחלקת wrapper, בחר את המחלקה carousel:

1. הגדר את display ל-grid.

2. הגדר את grid-auto-flow ל-column.

3. הגדר את grid-auto-column ל-calc((100% / 3) - 12px).

4. הגדר את הגלילה בציר x ל-auto.

5. הגדר את scroll-snap-type ל-x mandatory.

6. הגדר את gap ל-16px.

7. הגדר רדיוס גבול לפי בחירתך.

8. הגדר את התנהגות הגלילה ל-smooth.

9. הגדר את רוחב פס הגלילה ל-none.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>

כל השיעורים ביחידה סליידר | פרויקט Front-end

תרגלו בעצמכם: Web אונליין