Bootstrap > Carousel

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

output

 Views: 241 | Post Order: 46



Write for us