# Carousel

<figure><img src="https://853591514-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuexK95idPyH8HU9t0Nkh%2Fuploads%2F4CA8evmmVuoT6h6Y7OEi%2Fimage.png?alt=media&#x26;token=0758e960-17c5-4c01-83b9-069fa434dd72" alt=""><figcaption></figcaption></figure>

```html
<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.
