Incorporating advanced CSS techniques
Rob the CEO told Brenda that he was pleased with the home page but he now wanted a carousel of the new images on the home page displaying images of their past projects in a loop.
Sarah researched how to add a carousel and came up with the following CSS:
.carousel {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
}
.carousel-item {
flex: none; scroll-snap-align: start; width: 100%; position: relative;
}
.carousel-img {
width: 100%; display: block; border-radius: 10px;
}
.carousel {
scroll-behavior: smooth;
} Let’s take a closer look at this code:
.carousel: This class makes the carousel a flexible container, allowing horizontal scrolling with mandatory snap points.carousel-item: Each item in the carousel is positioned horizontally, snaps to the start, and takes up the full width...
