Skip to content

Carousel

Jump to bottom
Giorgio Bonvicini edited this page Oct 18, 2021 · 1 revision

This section displays a slideshow of photos.

Code

<!--Photo carousel-->
<section class="page-section alternate-bg">
    <div class="heading-container text-center">
        <h2 class="section-heading text-uppercase">Photo gallery</h2>
    </div>
    <div class="container">
        <div id="photo-carousel" class="carousel carousel-light slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <!--One button for each slide. Only the first one is active.-->
                <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <!--One div.carousel-item for each slide. Only the first one is active.-->
                <div class="carousel-item active">
                    <img src="/assets/img/team/group/20211002_cafè_1.jpg" class="d-block w-100" alt="Group photo 1">
                    <div class="carousel-caption fill-bg">
                        <h5>IML team meetup @ Aroma Cafè</h5>
                        <p>2/10/2021, Ph <a href="/team/manu_harikrishnan_nair.html">Manu Nair</a>.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="/assets/img/team/group/20211002_cafè_2.jpg" class="d-block w-100" alt="Group photo 2">
                    <div class="carousel-caption fill-bg">
                        <h5>IML team meetup @ Aroma Cafè</h5>
                        <p>2/10/2021, Ph <a href="/team/kiyanoush_nazari.html">Kiyanoush Nazari</a>.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="/assets/img/team/group/20211008-PoliTunnel.jpg" class="d-block w-100" alt="Group photo 3">
                    <div class="carousel-caption fill-bg">
                        <h5>IML team @ PoliTunnel on L-CAS away day</h5>
                        <p>8/10/2021, Ph <a href="/team/manu_harikrishnan_nair.html">Manu Nair</a>.</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#photo-carousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#photo-carousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</section>

Output

Customization

If you want to just add/remove images you should add these elements, as explained in the code:

<div class="carousel-indicators">
    <!--One button for each slide. Only the first one is active.-->
    <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#photo-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
    <!--One div.carousel-item for each slide. Only the first one is active.-->
    <div class="carousel-item active">
        <img src="/assets/img/team/group/20211002_cafè_1.jpg" class="d-block w-100" alt="Group photo 1">
        <div class="carousel-caption fill-bg">
            <h5>IML team meetup @ Aroma Cafè</h5>
            <p>2/10/2021, Ph <a href="/team/manu_harikrishnan_nair.html">Manu Nair</a>.</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="/assets/img/team/group/20211002_cafè_2.jpg" class="d-block w-100" alt="Group photo 2">
        <div class="carousel-caption fill-bg">
            <h5>IML team meetup @ Aroma Cafè</h5>
            <p>2/10/2021, Ph <a href="/team/kiyanoush_nazari.html">Kiyanoush Nazari</a>.</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="/assets/img/team/group/20211008-PoliTunnel.jpg" class="d-block w-100" alt="Group photo 3">
        <div class="carousel-caption fill-bg">
            <h5>IML team @ PoliTunnel on L-CAS away day</h5>
            <p>8/10/2021, Ph <a href="/team/manu_harikrishnan_nair.html">Manu Nair</a>.</p>
        </div>
    </div>
</div>

Please note that all photos should have the exact same aspect ratio, otherwise the sliding animation will be bugged.

If you want to change the id of the caraousel remember to change all the references as well, like in the buttons and in the controls.

If you want to change the appearence or the behaviour of the component you should read Bootstrap's documentation on the carousel component.

The one setting that can be easily changed and is silghtly different from the standard Bootstrap component is the light/dark setting, which can be set by using the carousel-light or carousel-dark class in the main div.

<div id="photo-carousel" class="carousel carousel-light slide" data-bs-ride="carousel">
Clone this wiki locally