Carousel with data-interval in Bootstrap

How to set the time interval to the sliding of the images in Bootstrap Carousel?

Carousel with data-interval

Data-interval in carousel function is used to set the time to slide images

We can set the data-interval by using data-attribute and javascript

Data-interval with data-attribute

In this example we had used data-interval to set the time by using data-attributes

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

    <div class="container">
        <h2>Carousel with data interval using data-attribute </h2>
        <p></p>
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">

            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="mango.jpg" height="200" width="200" />
                </div>

                <div class="item">
                    <img src="download.jpg" height="200" width="200" />
                </div>

                <div class="item">
                    <img src="Gauva.jpg" height="200" width="200" />
                </div>

                <div class="item">
                    <img src="pomogranite.jpg" height="200" width="200" />
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <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" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

</body>

In the above code snippet we have defined the carousel to slide the image and we are setting data-interval to slide in the given time , we use data-interval to slide the image in given time interval
In the first step we have taken then div section with class value container and we have another div section in the same div section with class value carousel slide and id as #mycarousel , data-ride as carousel which is used to activate the carousel and data-interval value as 500, we have defined the list values using <ol> elements with class value carousel-indicators using list values data-target #mycarousel and data-slide-to slides the given slide
In the next step we have div section with the class value carousel-inner to define the images to slide the images by using div section with class value item
After creating the images to slide, we have created the links to slide the images by giving the class value left carousel control and right carousel control

output

Data-interval using javascript

We can slide the image by setting data-interval using javascript

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

<div class="container">
  <h2>Carousel using data-interval 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>
    </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.jpg" height="200" width="100"/>
      </div>

      <div class="item">
          <img src="images%20(1).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({interval: 500});
        
    $(".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>

Data-interval using javascript

In the above code snippet we have defined the data-interval using javascript, we have div section with class value as container and we have another div with id as mycarousel and class value as carousel slide and we have defined the <ol> element to define the list values with class values as item
In the next line we have another div with class value carousel-inner to define the images with respective height and width
After creating the images we hae defined the left and right carousel controls which are used as symbols for turning the images with anchor tag with class value as left carousel control and right carousel control
In the script function we have used jQuery to define the carousel with id as #mycarousel , with data-interval as 500 which sets the time for the images to slide and we have called the list items with values item numbers