如何使bootstrap缩略图caurosel响应？

Question

您好我正在尝试使用bootstrap制作一个滑块（缩略图滑块）并且它正在滑动但我想逐个列滑动（如第一列：1-2-3，第二个：2-3-4，第三个：3-4-1等等）但不知道我在哪里误导，请帮助我做出来。 提示： 在最初它将显示列：1-2-3 然后当我点击右边控制它时，列：1应该被隐藏，列：2应该移到第一个位置和列：第3个到中心，列：4应该最后显示。

你好guyz我的问题已经解决，但我如何才能让它有所回应请帮助我。

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 10000
  })
  $('.fdi-Carousel .item').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

.carousel-inner.onebyone-carosel {
  margin: auto;
  width: 90%;
}

.onebyone-carosel .active.left {
  left: -33.33%;
}

.onebyone-carosel .active.right {
  left: 33.33%;
}

.onebyone-carosel .next {
  left: 33.33%;
}

.onebyone-carosel .prev {
  left: -33.33%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="span12">
      <div class="well">
        <div id="myCarousel" class="carousel fdi-Carousel slide">
          <!-- Carousel items -->
          <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
            <div class="carousel-inner onebyone-carosel">
              <div class="item active">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">1</div>
                </div>
              </div>
              <div class="item">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">2</div>
                </div>
              </div>
              <div class="item">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">3</div>
                </div>
              </div>
              <div class="item">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">4</div>
                </div>
              </div>
              <div class="item">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">5</div>
                </div>
              </div>
              <div class="item">
                <div class="col-md-4">
                  <a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
                  <div class="text-center">6</div>
                </div>
              </div>
            </div>
            <a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
            <a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
          </div>
          <!--/carousel-inner-->
        </div>
        <!--/myCarousel-->
      </div>
      <!--/well-->
    </div>
  </div>
</div>