Bootstrap > Carousel

Carousel using javascript in Bootstrap

How to control the Bootstrap carousel using javascript?

Carousel using javascript 

We can slide the images not only using data-attributes , we can also use javascript to slide the images 

  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;

<div class="container">
  <h2>Activate Carousel with JavaScript</h2>
  <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>

    <div class="carousel-inner" role="listbox">

      <div class="item active">
          <img src="download.jpg" alt="apple" height="200" width="300" />
        <div class="carousel-caption">
          <p style="color:black">Am Apple with Red color</p>

      <div class="item">
          <img src="mango.jpg" height="200" width="300"/>
        <div class="carousel-caption">
          <p style="color:black">Am mango with yellow color.</p>
      <div class="item">
          <img src="pomogranite.jpg" height="200" width="300"/>
        <div class="carousel-caption">
          <p style="color:black">AM pomogranite with red color </p>

      <div class="item">
          <img src="Gauva.jpg" height="200" width="300"/>
        <div class="carousel-caption">
          <p style="color:black">Am gauva with green color </p>

    <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 class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>

    $(document).ready(function () {

        $(".item1").click(function () {
        $(".item2").click(function () {
        $(".item3").click(function () {
        $(".item4").click(function () {

        $(".left").click(function () {
        $(".right").click(function () {
  • In the above code snippet we have defined the sliding of the images using javascript 
  • We have taken the div section with class value container and we have taken the another div section in the div section with id as #mycarousel with clas value as carousel slide
  • In the next line we have defined the list values using <ol> element with class value as carousel-indicators and we have taken four list values  
  • In the next line we have taken we have taken div section to define the images to slide by using class value carousel-inner  to define the images by using div with class value item 
  • In the next line we have defined the symbols by using class value left carousel-control and right carousel-control 
  • In the next line we have defined the script function to define the Slide we have id as #mycarousel and we have defined item values  by defining the id as #mycarousel to slide, after creating the slide images with list values and we have defined the left and right values with id as #mycarousel with carouselprev and carousel right 



 Views: 3816 | Post Order: 41

Write for us

Hosting Recommendations