Carousel Methods in Bootstrap

How to create different carousel methods in bootstrap

Carousel Methods

There are different types of carousel methods to create cycles, slides, stop, buttons, pause, number , prev, next etc.

Carousel cycle

Carousel cycle is used slide the images automatically and in this function we are defining the sliding of the images with buttons to make the slide and stop the slide

<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Carousel Methods</h2>
  
  <button type="button" id="myBtn" class="btn btn-success btn-lg" >Slide</button>
  <button type="button" id="myBtn2" class="btn btn-danger btn-lg" >Stop</button><br><br>
  <div id="myCarousel" class="carousel slide" data-interval="500">
    
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>
    
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="apple-01.jpg" height="200" width="100"/>
      </div>

      <div class="item">
          <img src="download.jpg" height="200" width="100"/>
      </div>
    
      <div class="item">
          <img src="images%20(1).jpg" height="200" width="100"/>
      </div>

      <div class="item">
          <img src="images.jpg" height="200" width="100"/>
      </div>
    </div>
 
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<script>
    $(document).ready(function () {        
        $("#myCarousel").carousel("pause");
       
        $("#myBtn").click(function () {
            $("#myCarousel").carousel("cycle");
        });
        
        $("#myBtn2").click(function () {
            $("#myCarousel").carousel("pause");
        });

        $(".item1").click(function () {
            $("#myCarousel").carousel(0);
        });
        $(".item2").click(function () {
            $("#myCarousel").carousel(1);
        });
        $(".item3").click(function () {
            $("#myCarousel").carousel(2);
        });
        $(".item4").click(function () {
            $("#myCarousel").carousel(3);
        });
        
        $(".left").click(function () {
            $("#myCarousel").carousel("prev");
        });
        $(".right").click(function () {
            $("#myCarousel").carousel("next");
        });
    });
</script>
</body>

In the above code snippet we have defined the carousel sliding image using buttons to slide and stop the image,
We have created two buttons using id as #myBtn and #myBtn2 with class values as btn-success and btn-danger
In the next line we have created div element with id as #mycarousel and class value as carousel slide with data-interval as 500
In the next line we have created <ol> element with class value as carousel-indicators and role as list box to create the list values
In the next line we have created div with class value as carousel-inner to create the images and created the symbols to change the images
In the next line we have used the script function to call the buttons in the carousel, we have (#mycarousel) to call the function pause
In the next line we are callling the buttons with the id as (#mybtn) to slide and (#mybtn2) to stop the sliding
In the next line by using itam values defining the images and previous and next to slide the images

output

Carousel Numbers

Carousel numbers are used to slide according to the given number and displays the given number image

 <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Carousel Methods</h2>
  <button type="button" id="myBtn" class="btn btn-success btn-lg">Select first image</button>
  <button type="button" id="myBtn2" class="btn btn-danger btn-lg">Select </button><br><br>
  <div id="myCarousel" class="carousel slide">   
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="apple-01.jpg" />
      </div>
      <div class="item">
          <img src="download.jpg" />
      </div>   
      <div class="item">
          <img src="images%20(1).jpg" />
      </div>
      <div class="item">
          <img src="images.jpg" />
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script>
    $(document).ready(function () {        
        $("#myCarousel").carousel("pause");        
        $("#myBtn").click(function () {
            $("#myCarousel").carousel(1);
        });     
        $("#myBtn2").click(function () {
            $("#myCarousel").carousel(2);
        });        
        $(".item1").click(function () {
            $("#myCarousel").carousel(0);
        });
        $(".item2").click(function () {
            $("#myCarousel").carousel(1);
        });
        $(".item3").click(function () {
            $("#myCarousel").carousel(2);
        });
        $(".item4").click(function () {
            $("#myCarousel").carousel(3);
        });       
        $(".left").click(function () {
            $("#myCarousel").carousel("prev");
        });
        $(".right").click(function () {
            $("#myCarousel").carousel("next");
        });
    });
</script>
</body>

Carousel number

In the above code snippet we have defined the carousel sliding image using buttons to slide according to given number
We have created two buttons using id as #myBtn and #myBtn2 with class values as btn-success and btn-danger
In the next line we have created div element with id as #mycarousel and class value as carousel slide with data-interval as 500
In the next line we have created <ol> element with class value as carousel-indicators and role as list box to create the list values
In the next line we have created div with class value as carousel-inner to create the images and created the symbols to change the images
In the next line we have used the script function to call the buttons in the carousel, we have (#mycarousel) to call the function pause
In the next line we are callling the buttons with the id as (#mybtn) to slide carousel (1) image and (#mybtn2) to slide the image (carousel 2) which makes to slide when we press the button
In the next line by using itam values defining the images and previous and next to slide the images

output

Carousel previous and Next

It is used to select the previous and Next image by using the prev and next

<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Carousel Methods</h2> 
  <button type="button" id="myBtn" class="btn btn-success btn-lg">Previous Item</button>
  <button type="button" id="myBtn2" class="btn btn-danger btn-lg">Next Item</button><br><br>
  <div id="myCarousel" class="carousel slide">    
    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol> 
    <div class="carousel-inner" role="listbox">
      <div class="item active">
          <img src="apple-01.jpg" />
      </div>
      <div class="item">
          <img src="download.jpg" />
      </div>    
      <div class="item">
          <img src="images%20(1).jpg" />
      </div>
      <div class="item">
          <img src="images.jpg" />
      </div>
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script>
    $(document).ready(function () {
        
        $("#myCarousel").carousel("pause");
     
        $("#myBtn").click(function () {
            $("#myCarousel").carousel("prev");
        });
   
        $("#myBtn2").click(function () {
            $("#myCarousel").carousel("next");
        });
       
        $(".item1").click(function () {
            $("#myCarousel").carousel(0);
        });
        $(".item2").click(function () {
            $("#myCarousel").carousel(1);
        });
        $(".item3").click(function () {
            $("#myCarousel").carousel(2);
        });
        $(".item4").click(function () {
            $("#myCarousel").carousel(3);
        });
        
        $(".left").click(function () {
            $("#myCarousel").carousel("prev");
        });
        $(".right").click(function () {
            $("#myCarousel").carousel("next");
        });
    });
</script>
</body>

Carousel Prev and Next

In the above code snippet we have defined the carousel sliding image using buttons to slide previous and next image
We have created two buttons using id as #myBtn and #myBtn2 with class values as btn-success and btn-danger
In the next line we have created div element with id as #mycarousel and class value as carousel slide with data-interval as 500
In the next line we have created <ol> element with class value as carousel-indicators and role as list box to create the list values
In the next line we have created div with class value as carousel-inner to create the images and created the symbols to change the images
In the next line we have used the script function to call the buttons in the carousel, we have (#mycarousel) to call the function pause
In the next line we are callling the buttons with the id as (#mybtn) to slide carousel(prev) to slide the previous image and (#mybtn2) to slide the image carousel(Next) which makes to slide when we press the button
In the next line by using itam values defining the images and previous and next to slide the images