Carousel

Overview

To integrate the carousel into your website, you need to include the following CSS and JS.

<link rel="stylesheet" href="https://webstyle.anu.edu.au/libs/bootstrap/css/bootstrap-carousel.min.css">
<script src="https://webstyle.anu.edu.au/libs/bootstrap/js/bootstrap-carousel.min.js"></script>

The carousel consists of three parts: 1) indicators, 2) sliders, and 3) prev/next buttons. Among them, the second part (items) is compulsory while the other two parts are optional.

SeletonExample
<div id="anu-doc-carousel" class="carousel slide" data-bs-ride="false">
    <!-- Part 1: indicators -->
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#anu-doc-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#anu-doc-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#anu-doc-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <!-- Part 2: sliders -->
    <div class="carousel-inner">
        <div class="carousel-item active"> ... </div>
        <div class="carousel-item"> ...  </div>
        <div class="carousel-item"> ...  </div>
    </div>

    <!-- Part 3: prev/next buttons -->
    <button class="carousel-control-prev" type="button" data-bs-target="#anu-doc-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="#anu-doc-carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"> </span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Customisation

EffectCode

Set data-bs-ride="false" on the element with classname carousel slide

For clarification, below is the code snippet

<div id="anu-doc-carousel" class="carousel slide" data-bs-ride="false">
    <div class="carousel-indicators">
    ...
    </div>
    <div class="carousel-inner">
    ...                            
    </div>
    ...
</div>

Set data-bs-ride="carousel" on the element with classname carousel slide

For clarification, below is the code snippet

<div id="anu-doc-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
        ...
        </div>
        <div class="carousel-inner">
        ...
        </div>
    ...
</div>

Step 1: open auto play, see C1-2: Auto play is on

Step 2: set data-bs-interval="3000" on the element with classname carousel slide

The default interval is 5s (data-bs-interval="5000")

The unit of interval is milisecond. For example, 1000 is 1s.

For clarification, below is the code snippet

<div id="anu-doc-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-indicators">
        ...
        </div>
        <div class="carousel-inner">
        ...
        </div>
    ...
</div>

Step 1: open auto play, see C1-2: Auto play is on

Step 2: set data-bs-interval="3000" on the element with classname carousel-item

For clarification, below is the code snippet

<div id="anu-doc-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
        ...
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="1000" > ... </div>
            <div class="carousel-item" data-bs-interval="2000" > ... </div>
            <div class="carousel-item" data-bs-interval="3000" > ... </div>
        </div>
    ...
</div>
Coming soon 
Coming soon