كلاس Carousel

الدرس 15 من 23 في دورة سلايدر | مشروع Front-end على Coddy.

التحدي

سهل

في الفئة wrapper، استهدف الفئة carousel:

1. اضبط display على grid.

2. اضبط grid-auto-flow على column.

3. اضبط grid-auto-column على calc((100% / 3) - 12px).

4. اضبط overflow الخاص بـ x على auto.

5. اضبط scroll-snap-type على x mandatory.

6. اضبط gap على 16px.

7. اضبط border radius من اختيارك.

8. اضبط scroll behavior على smooth.

9. اضبط scrollbar width على none.

جرّب بنفسك

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

كلاس Carousel

جميع دروس سلايدر | مشروع Front-end