Open In App

Bootstrap Carousel

Last Updated : 08 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap Carousel enables slideshow functionality for images or content. Easily customizable with CSS and JavaScript. Supports responsive design and touch gestures, enhancing user experience in web development projects.

It can be included in your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect.

This is how we can create an image slideshow using the Bootstrap carousel.

Examples of Bootstrap Carousel

Example 1: In this example, we include a Bootstrap carousel with indicators, images, and navigation controls for the previous and next slides. It utilizes Bootstrap CSS and JavaScript libraries for styling and functionality.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Carousel</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <link
            rel="stylesheet"
            href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
        />
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </script>
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">

        </script>
    </head>
    <body>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h4>Bootstrap Carousel</h4>
        <div
            id="myCarousel"
            class="carousel slide"
            data-ride="carousel"
        >
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li
                    data-target="#myCarousel"
                    data-slide-to="0"
                    class="active"
                ></li>
                <li
                    data-target="#myCarousel"
                    data-slide-to="1"
                ></li>
                <li
                    data-target="#myCarousel"
                    data-slide-to="2"
                ></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png"
                    />
                </div>
                <div class="item">
                    <img
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190528184201/gateexam.png"
                    />
                </div>
                <div class="item">
                    <img
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png"
                    />
                </div>
            </div>
            <!-- Left and right controls -->
            <a
                class="left carousel-control"
                href="#myCarousel"
                data-slide="prev"
            >
                <span
                    class="glyphicon glyphicon-chevron-left"
                ></span>
                <span class="sr-only"
                    >Previous</span
                >
            </a>
            <a
                class="right carousel-control"
                href="#myCarousel"
                data-slide="next"
            >
                <span
                    class="glyphicon glyphicon-chevron-right"
                ></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </body>
</html>

Output:

Carousel-1

Bootstrap Carousel Example Output

Explanation

  • Wrapper for slides: Div with class=”carousel-inner” contains slides, each specified within a div class=”item”.
  • Outermost div: Div with class=”carousel” indicates the carousel, with data-ride=”carousel” for automatic sliding.
  • Indicators: Ordered list with class=”carousel-indicators” provides dots indicating slides.
  • Left and right controls: Buttons with data-slide attribute allow manual navigation.
  • Adding captions: Use class=”carousel-caption” within each div class=”item”.

Example 2: In this example we features a Bootstrap carousel with two slides, each containing an image and a caption. Navigation controls allow users to move between slides. It uses Bootstrap for styling and functionality.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Carousel</title>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        />
        <link
            rel="stylesheet"
            href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
        />
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

        </script>
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">

        </script>
    </head>
    <body>
        <div
            id="myCarousel"
            class="carousel slide"
            data-ride="carousel"
        >
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li
                    data-target="#myCarousel"
                    data-slide-to="0"
                    class="active"
                ></li>
                <li
                    data-target="#myCarousel"
                    data-slide-to="1"
                ></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png"
                    />
                    <div class="carousel-caption">
                        <b>
                            <h1
                                class="text-success"
                            >
                                GeeksforGeeks
                            </h1>

                            <p>
                                Join Geeks Classes
                            </p>
                        </b>
                    </div>
                </div>
                <div class="item">
                    <img
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png"
                    />
                    <div class="carousel-caption">
                        <b>
                            <h1
                                class="text-primary"
                            >
                                GeeksforGeeks
                            </h1>

                            <p>
                                Join Geeks Classes
                            </p>
                        </b>
                    </div>
                </div>
            </div>
            <!-- Left and right controls -->
            <a
                class="left carousel-control"
                href="#myCarousel"
                data-slide="prev"
            >
                <span
                    class="glyphicon glyphicon-chevron-left"
                ></span>
                <span class="sr-only"
                    >Previous</span
                >
            </a>
            <a
                class="right carousel-control"
                href="#myCarousel"
                data-slide="next"
            >
                <span
                    class="glyphicon glyphicon-chevron-right"
                ></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </body>
</html>

Output:

Carousel-2

Bootstrap Carousel Example Output

  • CYCLE: It cycles through the carousel from left to right.

Example: 

Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(".start-slide").click(function(){
        $("#myCarousel").carousel('cycle');
    });
});
</script>
  • PAUSE: Stops the carousel from moving wherever you want.

Example: 

Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(".pause-slide").click(function(){
        $("#myCarousel").carousel('pause');
    });
});
</script>
  • NUMBER: It cycles the carousel according to a particular frame(starting from 0, just like in an array).

Example:

Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(".slide-three").click(function(){
        $("#myCarousel").carousel(3);
    });
});
</script>
  • PREV: Cycles the carousel to its previous image, it’s just like we did earlier in the bootstrap part.

Example:

Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(".prev-slide").click(function(){
        $("#myCarousel").carousel('prev');
    });
});
</script>
  • NEXT: Cycles the carousel to its next image, it’s the same as we did in the bootstrap part of the carousel.

Example: 

Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(".next-slide").click(function(){
        $("#myCarousel").carousel('next');
    });
});
</script>

 

Supported Browsers:



Previous Article
Next Article

Similar Reads

Bootstrap 5 Carousel Individual .carousel-item interval
Bootstrap 5 Carousel Individual .carousel-item interval is used to give time intervals to individual carousel items by which the carousel items will be automatically cycled at the given intervals of time. Bootstrap 5 Carousel Classes: carousel-item: This class specifies each item of the carousel. Bootstrap 5 Carousel Attributes: data-bs-interval=""
3 min read
Image Carousel using react-native-snap-carousel package
A React-Native Image Carousel offers seamless navigation through a series of images in a horizontal format. Using React-Native's framework, developers create dynamic carousels with swipe gestures, pagination indicators, and smooth transitions. This component is ideal for product galleries, sliders, or multimedia presentations in mobile apps, enhanc
3 min read
Bootstrap 4 | Carousel
The Bootstrap Carousel is used to create an image slide show for the webpage to make it look more attractive. It can be included in the webpage using bootstrap.js or bootstrap.min.js. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Example: C/C++ Code
2 min read
How to display bootstrap carousel with three post in each slide?
A Bootstrap Carousel is a slideshow for rotating through a series of contents. It is built with CSS and Javascript. It works with a series of photos, images, texts, etc. It can be used as an image slider for showcasing a huge amount of content within a small space on the web page, as it works on the principle of dynamic presentations. Syntax: &lt;d
5 min read
How to wrap text around circular carousel in Bootstrap 4 ?
Wrapping up a circular carousel is quite hectic compare to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel. First, you have to create Bootstrap Carousel. To make that carousel circular you can use CSS border-radius proper
2 min read
How to Design Half-Page Carousel in Bootstrap ?
It can be included in your webpage using “bootstrap.js” or “bootstrap.min.js”. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Bootstrap Carousel is image slide show for your webpage to make it look more attractive. But the normal Bootstrap Carousel too
2 min read
How to fade in and fade out background with bootstrap text carousel ?
In this article, we will show you how to fade in and fade out the background with a bootstrap text carousel. Carousel is a slideshow, and it is used for cycling components like images or text. Approach: To create a fade-in and fade-out background with a bootstrap text carousel we have followed some basic steps. Step 1: Add bootstrap CDN to your HTM
2 min read
How to change Bootstrap Carousel Interval at Runtime ?
We will learn how to change carousel intervals at runtime using bootstrap. In this example, we are going to discuss multiple approaches. Bootstrap carousel is a slideshow for sliding through multiple contents built with JavaScript, CSS, and animation. It works with text, images, and custom markups. It also includes previous and next controls and in
4 min read
Explain the uses of carousel plugin in Bootstrap
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, including the cross-browser compatibility issue. Carousel is the slideshow component of Boo
3 min read
Bootstrap 5 Carousel Methods
Bootstrap 5 Carousel Methods are used with JavaScript to implement different settings and variations to the carousel. Bootstrap 5 Carousel Methods: cycle: Using this method, a carousel will rotate through the slides from left to right.pause: Using this method, a carousel will stop rotating through the slides.prev: Using this method, a carousel will
4 min read
Article Tags :