Lớp carousel

Bài học 15 trên 23 trong khóa học Dự án slider giao diện người dùng của Coddy.

Thử thách

Dễ

Trong lớp wrapper, nhắm đến lớp carousel:

1. Đặt display thành grid.

2. Đặt grid-auto-flow thành column.

3. Đặt grid-auto-column thành calc((100% / 3) - 12px).

4. Đặt giá trị tràn theo trục x thành auto.

5. Đặt scroll-snap-type thành x mandatory.

6. Đặt gap thành 16px.

7. Đặt bán kính đường viền theo ý bạn.

8. Đặt hành vi cuộn thành smooth.

9. Đặt độ rộng thanh cuộn thành none.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Dự án slider giao diện người dùng

Tự luyện tập: Playground Web