Menu
Coddy logo textTech

Carousel Sınıfı

Coddy'nin Slider | Front-end Projesi kursunda ders 15 / 23.

challenge icon

Görev

Kolay

Wrapper sınıfı içinde, carousel sınıfını hedefleyin:

1. display özelliğini grid olarak ayarlayın.

2. grid-auto-flow özelliğini column olarak ayarlayın.

3. grid-auto-column özelliğini calc((100% / 3) - 12px) olarak ayarlayın.

4. x eksenindeki taşmayı (overflow) auto olarak ayarlayın.

5. scroll-snap-type özelliğini x mandatory olarak ayarlayın.

6. gap özelliğini 16px olarak ayarlayın.

7. İstediğiniz bir kenarlık yarıçapı (border radius) ayarlayın.

8. Kaydırma davranışını (scroll behavior) smooth olarak ayarlayın.

9. Kaydırma çubuğu genişliğini (scrollbar width) none olarak ayarlayın.

Kendin dene

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

Slider | Front-end Projesi bölümündeki tüm dersler