Open In App

How to display bootstrap carousel with three post in each slide?

Last Updated : 30 Jan, 2023
Comments
Improve
Suggest changes
2 Likes
Like
Report

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:

<div class="container"> Bootstrap image contents... <div>

Following are the steps to create a Bootstrap carousel:

1. Include Bootstrap Javascript, CSS and JQuery Library files in the head sections, that are pre-loaded and pre-compiled 

HTML 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

2. Apply CSS to resize the .carousel Bootstrap card body by using the code segment below. 

HTML 
<style>
    .carousel {
    width:200px;
    height:200px;
    }
</style>

3. In the body section create a division class with carousel slider using the syntax below 

HTML 
<div id="carousel-demo" class="carousel slide" data-ride="carousel"></div>

4. In this step, the sliding images are defined in the division tag as under. 

HTML 
<div class="carousel-inner">
    <div class="item">
    <img src="..URL of image">
</div>
</div>

5. The last step is to add controls to slide images using the carousel-control class as below. 

HTML 
<a class="left carousel-control" href="#carousel-demo2" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-demo2" data-slide="next">
    <span class="icon-next"></span>
</a>

Note: We repeat step no. 4 as many times depending on how many images we are providing inside the carousel slider and step 3 exactly twice to display two sections in Bootstrap card with image slider .carousel

Example 1: Let us implement the above approach and create a Bootstrap card using HTML, CSS, Js with an image slider first and then move further in the next example to add multiple rows and multiple columns. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--Add pre compiled library files -->
    <!--Automatics css and js adder-->
    <!--auto compiled css & Js-->
    <script type="text/javascript"
            src="//code.jquery.com/jquery-1.9.1.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href="/css/result-light.css">
    <script type="text/javascript"
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>
    <!-- create a bootstrap card in a container-->
    <div class="container">
        <!--Bootstrap card with slider class-->
        <div id="carousel-demo"
            class="carousel slide"
            data-ride="carousel">
            <div class="carousel-inner">
                <div class="item">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png">
                </div>
                <div class="item">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png">
                </div>
                <div class="item active">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png">
                </div>
            </div>
            <!--slider control for card-->
            <a class="left carousel-control"
            href="#carousel-demo"
            data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left">
            </span>
            </a>
            <a class="right carousel-control"
            href="#carousel-demo"
            data-slide="next">
                <span class="glyphicon glyphicon-chevron-right">
            </span>
            </a>
        </div>
    </div>
</body>

</html>

Output:

  

Example 2: Now we extend the implementation of example 1 to show multiple images in a Bootstrap Carousel all at once with the slider at the ends. Below is the implementation of a styled HTML code fragment. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <!--auto compiled css & Js-->
    <script type="text/javascript"
            src="//code.jquery.com/jquery-1.9.1.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href="/css/result-light.css">
    
    <script type="text/javascript"
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- JavaScript for adding
    slider for multiple images
    shown at once-->
    <script type="text/javascript">
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length ||
                (i = $(this).siblings(":first")),
                i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>

</head>

<body>
    <!-- container class for bootstrap card-->
    <div class="container">
        <!-- bootstrap card with row name myCarousel as row 1-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
            </div> <a class="left carousel-control"
                    href="#myCarousel"
                    data-slide="prev">
        <i class="glyphicon glyphicon-chevron-left">
        </i>
        </a>
            <a class="right carousel-control"
            href="#myCarousel"
            data-slide="next">
            <i class="glyphicon glyphicon-chevron-right">
            </i>
        </a>

        </div>
    </div>
</body>

</html>

Output:

  

Example 3: Now we create a Bootstrap card with multiple images stacked in rows & columns using a slider. We display multiple posts each in a bootstrap carousel, that is we display multiple images using the matrix table. Below is the implementation of a styled HTML code fragment. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- auto compiled css and js library files-->
    <script type="text/javascript"
            src="//code.jquery.com/jquery-1.9.1.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href="/css/result-light.css">
    <script type="text/javascript"
            src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    
    <link rel="stylesheet"
        type="text/css"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript">
        <!-- JavaScript to slide images horizontally-->
        $(window).load(function() {
            $(".carousel .item").each(function() {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                i.children(":first-child").clone().appendTo($(this));
                
                for (var n = 0; n < 4; n++)(i = i.next()).length ||
                (i = $(this).siblings(":first")),
                i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>

</head>

<body>
    <!--container class-->
    <div class="container">
        <!-- myCarousel as row 1 in bootstrap card named container-->
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143855/223-1.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
            </div>
            <!-- row 1 of bootstrap card control-->
            <a class="left carousel-control"
            href="#myCarousel"
            data-slide="prev">
                
            <i class="glyphicon glyphicon-chevron-left">
            </i>
        </a>
            <a class="right carousel-control"
            href="#myCarousel"
            data-slide="next">
            <i class="glyphicon glyphicon-chevron-right">
            </i>
        </a>

        </div>
        <!-- myCarousel as row 2 of
            bootstrap card named container-->
        <div class="carousel slide" id="myCarousel2">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143910/457.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143904/391.png"
                            class="img-responsive"></a>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">
                        <a href="#">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190709143850/1382.png"
                            class="img-responsive">
                    </a>
                    </div>
                </div>
            </div>
            <!-- myCarousel2, control of row
                2 of container class bootstrap card-->
            <a class="left carousel-control"
            href="#myCarousel2"
            data-slide="prev">
            <i class="glyphicon glyphicon-chevron-left">
            </i>
        </a>
            <a class="right carousel-control"
            href="#myCarousel2"
            data-slide="next">
            <i class="glyphicon glyphicon-chevron-right">
            </i>
        </a>

        </div>

    </div>
</body>

</html>

Output:

 


P

Pritesh Ranjan 1
Improve
Article Tags :

Explore

Lightbox