How the Carousel Works
This carousel uses CSS flexbox and JavaScript to create a sliding image gallery. Here's the breakdown:
1. Structure:
- .carousel - The container with hidden overflow
- .carousel-inner - Flex container holding all slides
- .carousel-item - Each slide (set to min-width: 100%)
2. Navigation:
The buttons use onclick="moveSlide(±1)" to trigger slide changes:
- Prev button (-1) - Slides left to previous image
- Next button (+1) - Slides right to next image
3. Animation:
The smooth sliding effect comes from CSS transition on .carousel-inner:
transition: transform 0.5s ease-in-out;JavaScript modifies the transform: translateX() property to move the slides.