Carousel with Wrap in Bootstrap

How to stop rotating carousel images from begining using Bootstrap?

Carousel Wrap

Wrap function in Carousel is used continous sliding of image and stops sliding after last image, we can warp using data-attribute and javascript

Carousel Wrap with javascript

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

<div class="container">
 <h2>Carousel wrap</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%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({ interval: 500, wrap: false });       
        $(".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 wrap function in carousel, we have defined the carousel wrap with javascript, we have taken div element with class value container and we have another div with id as mycarousel and class value as carousel slide.
In the next line we have <ol> element with class value as carousel-indicators to define the list values
In the next line we have the div element with class value carousel-inner and role as list box and we have defined the sliding images using class value item
In the next line we have defined the symbols of the list values using anchor tag with class value left and right carousel control defining the glyphicon of left and right symbols
In the next line we have script function W call the function #mycarousel and data-interval as 500 and , wrap as false defines the continous sliding of the image and makes stop at the last image by defining the item values

output

Carousel wrap with data-attribute

Carousel wrap is used to make the images slide continously and make stop after last image, in this we are using carousel wrap with data-attribute

 <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="#mycarousel" class="carousel slide" data-wrap="false" data-interval="500" data-ride="carousel">
            <h2>Bootstrap carousel slide with wrap using data-attribute</h2>
            <ol class="carousel-indicators">
                <li data-target="#mycarousel" data-slide="0" class="active"></li>
                <li data-target="#mycarousel" data-slide="1"></li>
                <li data-target="#mycarousel" data-slide="2"></li>
                <li data-target="#mycarousel" data-slide="3"></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" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only"></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"></span>
            </a>
        </div>
    </div>
</body>

Wrap with data-attribute

In the above code snippet we have defined carousel wrap with data-attribute,
In the body section we have div section with class value container and we have defined the div with id as #mycarousel and class value as carousel slide and data-wrap as false defines the wrap function
In the next line we have the <ol> element with class value as carousel-indicators to define the list values with data-slide values
In the next line we have the div element with class value as carousel-inner to define the images and left and right symbols