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

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

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

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

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

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

      <div class="item">
          <img src="Gauva.jpg" height="200" width="300"/>
        <div class="carousel-caption">
          <h3>Gauva</h3>
          <p style="color:black">Am gauva with green color </p>
        </div>
      </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();


        $(".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>

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

output

Views: 3782 | Post Order: 41

Bootstrap > Carousel

Carousel using javascript in Bootstrap

How to control the Bootstrap carousel using javascript?

Carousel using javascript

Related Posts

Utility Tools