How To Display Bootstrap carousel With Three Post In Each slide

Posted By Bajarangi soft , Posted On 10-10-2020

A Bootstrap Carousel is a slideshow for rotating through 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 the huge amount of contents within a small space on the web page, as it works on the principle of dynamic presentations.

A Bootstrap Carousel is a slideshow for rotating through series of contents.

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

Following are the steps to create a Bootstrap carousel:

<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 src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">

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

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

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

<div id=”carousel-demo” class=”carousel slide” data-ride=”carousel”>

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

<div class=”carousel-inner”>
    <div class=”item”>
        <img src=”..URL of image”>

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

<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>

Example 1:
Let us implement the above approach and create a Bootstrap card using HTML, CSS, Js with image slider first

<!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>