Carousel Class
Lesson 15 of 23 in Coddy's Slider | Front-end Project course.
Challenge
EasyIn the wrapper class, target carousel class:
1. Set the display to grid.
2. Set grid-auto-flow to column.
3. Set grid-auto-column to calc((100% / 3) - 12px).
4. Set the overflow of x to auto.
5. Set scroll-snap-type to x mandatory.
6. Set the gap to 16px.
7. Set the border radius of your choice.
8. Set the scroll behavior to smooth.
9. Set the scrollbar width to none.
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>