Bootstrap Carousel

A Carousel is a slideshow component that displays multiple items one at a time.

Carousels are commonly used for:

• Website banners.
• Image galleries.
• Product slides.
• Course promotions.
• Testimonials.
• Featured content.

A Bootstrap Carousel normally contains a main Carousel container, slides, indicators, and navigation controls.

<div
id="myCarousel"
class="carousel slide">

    <div class="carousel-inner">

        <div class="carousel-item active">

            Slide 1

        </div>

        <div class="carousel-item">

            Slide 2

        </div>

    </div>

</div>

The .carousel class creates the main Carousel component.

<div
class="carousel"
id="myCarousel">

    ...

</div>

The Carousel usually also uses the .slide class to enable the slide transition.

The .slide class enables the sliding transition effect when the Carousel changes slides.

<div
id="myCarousel"
class="carousel slide">

    ...

</div>

Without the .slide class, the Carousel can still function, but the normal sliding transition is not applied.

The .carousel-inner class contains all Carousel slides.

<div class="carousel-inner">

    ...

</div>

Each individual slide is placed inside this container.

Each slide uses the .carousel-item class.

<div class="carousel-item">

    Slide content

</div>

A Carousel can contain multiple .carousel-item elements.

One slide must have the active class so Bootstrap knows which slide should be displayed initially.

<div
class="carousel-item active">

    First Slide

</div>

Images are commonly used as Carousel slides.

<div
id="imageCarousel"
class="carousel slide">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img
            src="image1.jpg"
            class="d-block w-100"
            alt="First slide">

        </div>

        <div class="carousel-item">

            <img
            src="image2.jpg"
            class="d-block w-100"
            alt="Second slide">

        </div>

    </div>

</div>

Indicators allow users to see which slide is active and navigate directly to a particular slide.

<div class="carousel-indicators">

    <button
    type="button"
    data-bs-target="#myCarousel"
    data-bs-slide-to="0"
    class="active"
    aria-current="true"
    aria-label="Slide 1">

    </button>

    <button
    type="button"
    data-bs-target="#myCarousel"
    data-bs-slide-to="1"
    aria-label="Slide 2">

    </button>

</div>

The data-bs-slide-to attribute specifies which slide an indicator should display.

<button
type="button"
data-bs-target="#myCarousel"
data-bs-slide-to="1"
aria-label="Slide 2">

</button>

Slide indexes start from 0. Therefore, the first slide is 0, the second is 1, and so on.

The Previous control allows users to move to the previous slide.

<button
class="carousel-control-prev"
type="button"
data-bs-target="#myCarousel"
data-bs-slide="prev">

    <span
    class="carousel-control-prev-icon">

    </span>

    <span class="visually-hidden">
    Previous
    </span>

</button>

The Next control moves the Carousel to the next slide.

<button
class="carousel-control-next"
type="button"
data-bs-target="#myCarousel"
data-bs-slide="next">

    <span
    class="carousel-control-next-icon">

    </span>

    <span class="visually-hidden">
    Next
    </span>

</button>

The following example combines slides and Previous/Next controls.

<div
id="basicCarousel"
class="carousel slide">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <div class="p-5 bg-primary text-white">

                Slide One

            </div>

        </div>

        <div class="carousel-item">

            <div class="p-5 bg-success text-white">

                Slide Two

            </div>

        </div>

    </div>


    <button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#basicCarousel"
    data-bs-slide="prev">

        <span
        class="carousel-control-prev-icon">

        </span>

        <span
        class="visually-hidden">

        Previous

        </span>

    </button>


    <button
    class="carousel-control-next"
    type="button"
    data-bs-target="#basicCarousel"
    data-bs-slide="next">

        <span
        class="carousel-control-next-icon">

        </span>

        <span
        class="visually-hidden">

        Next

        </span>

    </button>

</div>

Carousel captions can be used to display headings and descriptions over a slide.

<div class="carousel-caption">

    <h5>
    Course Training
    </h5>

    <p>
    Learn professional web development.
    </p>

</div>

Captions are normally placed inside a .carousel-item.

A Carousel slide can contain both an image and a caption.

<div class="carousel-item active">

    <img
    src="course.jpg"
    class="d-block w-100"
    alt="Course">

    <div class="carousel-caption">

        <h5>
        Web Development
        </h5>

        <p>
        Learn HTML, CSS, JavaScript and Bootstrap.
        </p>

    </div>

</div>

A Carousel can automatically move from one slide to another using the Carousel JavaScript behavior.

<div
id="autoCarousel"
class="carousel slide"
data-bs-ride="carousel">

    ...

</div>

The data-bs-ride="carousel" attribute tells Bootstrap to start cycling through the Carousel automatically.

The data-bs-interval attribute can be used to control the delay between slides.

<div
class="carousel-item active"
data-bs-interval="3000">

    Slide One

</div>

The value is specified in milliseconds. For example, 3000 means approximately 3 seconds.

Bootstrap Carousels can be configured to pause cycling when the pointer is over the Carousel.

<div
id="myCarousel"
class="carousel slide"
data-bs-ride="carousel"
data-bs-pause="hover">

    ...

</div>

This can give users more time to read slide content.

Bootstrap Carousel supports keyboard interaction by default when the Carousel is appropriately configured.

<div
id="keyboardCarousel"
class="carousel slide"
data-bs-ride="carousel">

    ...

</div>

Keyboard navigation allows users to interact with the Carousel without using a mouse.

A Carousel can contain any practical number of slides.

A Carousel slide can contain buttons and other interactive elements.

<div class="carousel-item active">

    <div class="p-5 bg-primary text-white">

        <h3>
        Learn Bootstrap
        </h3>

        <p>
        Start learning Bootstrap today.
        </p>

        <a
        href="#"
        class="btn btn-light">

        Start Learning

        </a>

    </div>

</div>

Educational websites can use Carousels to highlight different courses.

Accessibility is important when using Carousels because content changes automatically or through user interaction.

• Use meaningful alternative text for informative images.
• Use aria-label on navigation controls.
• Use visually hidden labels for Previous and Next controls.
• Make indicators understandable.
• Do not rely only on color to identify the active slide.
• Consider whether automatic cycling is appropriate for the content.

Images inside a Carousel can use Bootstrap's responsive image utilities.

<img
src="banner.jpg"
class="d-block w-100"
alt="Website banner">

The w-100 class makes the image span the available width of its container.

Always use appropriate image dimensions and meaningful alt text.

Avoid these common mistakes when working with Bootstrap Carousels:

• Forgetting the active class on the first slide.
• Using duplicate IDs.
• Using the wrong data-bs-target.
• Forgetting the Bootstrap JavaScript bundle.
• Using missing or meaningless image alt text.
• Using too many slides.
• Using very fast automatic transitions.
• Adding too much text to a slide.
• Forgetting Previous and Next controls when appropriate.
• Making important information available only through a Carousel.

A Carousel can also be controlled directly through the Bootstrap JavaScript API.

const carouselElement =
document.getElementById(
'myCarousel'
);

const carousel =
new bootstrap.Carousel(
carouselElement
);

carousel.next();

The next() method moves to the next slide.

Bootstrap Carousel provides methods for controlling slides.

• next() – moves to the next slide.
• prev() – moves to the previous slide.
• pause() – stops automatic cycling.
• cycle() – resumes cycling.
• to(index) – moves to a specific slide.

const carousel =
new bootstrap.Carousel(
carouselElement
);

carousel.to(2);

The to(2) method moves to the third slide because slide indexes start at zero.

Bootstrap Carousel provides JavaScript events that can be used to respond to slide changes.

Useful events include:

• slide.bs.carousel
• slid.bs.carousel

const carousel =
document.getElementById(
'myCarousel'
);

carousel.addEventListener(
'slid.bs.carousel',
function(){

    console.log(
    'Slide changed'
    );

});

A Carousel can be used to create a simple image gallery.

<div
id="galleryCarousel"
class="carousel slide"
data-bs-ride="carousel">

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img
            src="image1.jpg"
            class="d-block w-100"
            alt="Gallery image one">

        </div>

        <div class="carousel-item">

            <img
            src="image2.jpg"
            class="d-block w-100"
            alt="Gallery image two">

        </div>

        <div class="carousel-item">

            <img
            src="image3.jpg"
            class="d-block w-100"
            alt="Gallery image three">

        </div>

    </div>

</div>

The same structure can be extended with indicators, captions, and navigation controls.

This complete example combines indicators, multiple slides, captions, and Previous/Next controls.

<div
id="completeCarousel"
class="carousel slide"
data-bs-ride="carousel">


    <div class="carousel-indicators">

        <button
        type="button"
        data-bs-target="#completeCarousel"
        data-bs-slide-to="0"
        class="active"
        aria-current="true"
        aria-label="Slide 1">

        </button>

        <button
        type="button"
        data-bs-target="#completeCarousel"
        data-bs-slide-to="1"
        aria-label="Slide 2">

        </button>

        <button
        type="button"
        data-bs-target="#completeCarousel"
        data-bs-slide-to="2"
        aria-label="Slide 3">

        </button>

    </div>


    <div class="carousel-inner">


        <div class="carousel-item active">

            <div class="p-5 bg-primary text-white text-center">

                <h3>
                HTML Course
                </h3>

                <p>
                Learn the structure of modern web pages.
                </p>

            </div>

        </div>


        <div class="carousel-item">

            <div class="p-5 bg-success text-white text-center">

                <h3>
                CSS Course
                </h3>

                <p>
                Learn how to style responsive websites.
                </p>

            </div>

        </div>


        <div class="carousel-item">

            <div class="p-5 bg-info text-white text-center">

                <h3>
                Bootstrap Course
                </h3>

                <p>
                Build responsive interfaces using Bootstrap.
                </p>

            </div>

        </div>


    </div>


    <button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#completeCarousel"
    data-bs-slide="prev">

        <span
        class="carousel-control-prev-icon">

        </span>

        <span
        class="visually-hidden">

        Previous

        </span>

    </button>


    <button
    class="carousel-control-next"
    type="button"
    data-bs-target="#completeCarousel"
    data-bs-slide="next">

        <span
        class="carousel-control-next-icon">

        </span>

        <span
        class="visually-hidden">

        Next

        </span>

    </button>


</div>