カルーセルクラス
Coddyの「スライダー | フロントエンド・プロジェクト」コースのレッスン 15/23。
チャレンジ
簡単wrapper クラスの中で、carousel クラスをターゲットにします：
1. display を grid に設定します。
2. grid-auto-flow を column に設定します。
3. grid-auto-column を calc((100% / 3) - 12px) に設定します。
4. x 方向の overflow を 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>