title: Sliding of an image using carousel
body: <p>I have problem with carousel,
     I have tried a lot, but I am not able to solve
      I have one carousel with 4 images.Here i want to like in 1st iteration:
      1-2-3-4
      2nd iteration: 4-5-6-7
      3rd iteration:7-8-9-10
     this will when we click on corousel.
      here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="CustomStyles.css" rel="stylesheet"&gt;
  &lt;script&gt;
   $(document).ready(function () {
      $('#myCarousel').carousel({
          interval: false
      })
  
  
      $('.carousel .item').each(function(){
          var next = $(this).next();
          if (!next.length) {
              next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));
  
          for (var i=0;i&lt;2;i++) {
              next=next.next();
              if (!next.length) {
                  next = $(this).siblings(':first');
              }
  
              next.children(':first-child').clone().appendTo($(this));
          }
      });
  });
  &lt;/script&gt;
  &lt;style&gt;
  .carousel-inner .active.left { left: -25% ; }
  .class-inner .active.right{left : 25%;}
  .carousel-inner .next        { left:  25% ; }
  .carousel-inner .prev        { left:  -25% ; }
  .carousel-control            { width:  4%; }
  .carousel-control.left,.carousel-control.right {margin-left:-15px;background-image:none;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  &lt;div class="col-xs-12 text-center" style=" direction: ltr"&gt;
  &lt;div class="col-md-10 col-md-offset-1"&gt;
      &lt;div class="carousel slide" id="myCarousel"&gt;
          &lt;div class="carousel-inner"&gt;
  
              &lt;div class="item active"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="1.jpg" href="sa.html" class="img-responsive"&gt;1&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="2.jpg" class="img-responsive"&gt;2&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="3.jpg" class="img-responsive"&gt;3&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="4.jpg" class="img-responsive"&gt;4&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="5.jpg" class="img-responsive"&gt;5&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="6.jpg" class="img-responsive"&gt;6&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="7.jpg" class="img-responsive"&gt;7&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                  &lt;div class="col-md-3"&gt;&lt;a href="#"&gt;&lt;img src="8.jpg" class="img-responsive"&gt;8&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>