Carousel

This HTML structure represents a responsive carousel featuring multiple image slides with captions:

<div class="container">
    <div id="carousel-1" class="carousel" role="region" aria-labelledby="carousel-1-title">
        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-1-title">
            <div class="slide-content">
                <div class="slide-caption">
                    <h3 id="carousel-1-slide-1-title">Nanda Kot peak</h3>
                    <p>Mukteshwar, Uttarakhand</p>
                </div>
                <img src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg" alt="Nanda Kot peak" width="800" height="350" />
            </div>
        </div>

        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-2-title">
            <div class="slide-content">
                <div class="slide-caption">
                    <h3 id="carousel-1-slide-2-title">Manali Mountains</h3>
                    <p>Manali, Himachal Pradesh</p>
                </div>
                <img src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg" alt="Manali Mountains" width="800" height="350" />
            </div>
        </div>

        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-3-title">
            <div class="slide-content">
                <div class="slide-caption">
                    <h3 id="carousel-1-slide-3-title">Aotearoa</h3>
                    <p>New Zealand</p>
                </div>
                <img src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg" alt="Aotearoa" width="800" height="350" />
            </div>
        </div>

        <div class="slide" role="tabpanel" aria-labelledby="carousel-1-slide-4-title">
            <div class="slide-content">
                <div class="slide-caption">
                    <h3 id="carousel-1-slide-4-title">Richmond Park</h3>
                    <p>London, England</p>
                </div>
                <img src="https://storage.lib.hkbu.edu.hk/projects/bookplate/KATH-002.jpg" alt="London’s Richmond Park" width="800" height="350" />
            </div>
        </div>
    </div>
</div>

Key Features

• Accessibility: ARIA attributes (role, aria-labelledby) are used for accessibility, ensuring screen readers can navigate and understand the carousel.

• Responsive Design: Images have specified width and height attributes (width="800" height="350") for consistent sizing and optimal display on different devices.

• Captioned Slides: Each slide includes a title (<h3>) and description (<p>), enhancing content context and user engagement.

• Interactive Experience: Suitable for showcasing multiple images with associated information, ideal for galleries or promotional displays.