html - 列在 Bootstrap 3 slider 中消失

Question

我有一个用 Bootstrap 3 制作的 slider 。我的 slider 中应该有第四列，但第四列不见了。我快要崩溃了，为什么只有 3 列？我看了很多遍代码，还是不明白为什么？当我运行 slider 时，第 1 列似乎有点跳跃，或者只是我的问题？

例子可以be seen here .

$('#myCarousel').carousel({
      interval: 10000
    })

    $('.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));
      }
    });

    /* override position and transform in 3.3.x */
    .carousel-inner .item.left.active {
      transform: translateX(-33%);
    }
    .carousel-inner .item.right.active {
      transform: translateX(33%);
    }

    .carousel-inner .item.next {
      transform: translateX(33%)
    }
    .carousel-inner .item.prev {
      transform: translateX(-33%)
    }

    .carousel-inner .item.right,
    .carousel-inner .item.left { 
      transform: translateX(0);
    }


    .carousel-control.left,.carousel-control.right {background-image:none;}

<div class="col-md-12">
    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/000000/fff&amp;text=1" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/CCCCCC/fff&amp;text=2" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/000000/fff&amp;text=3" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/CCCCCC/fff&amp;text=4" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/000000/333&amp;text=5" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/CCCCCC/fff&amp;text=6" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/000000/fff&amp;text=7" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="col-md-3"><a href="#"><img src="http://placehold.it/500/CCCCCC/fff&amp;text=8" class="img-responsive"></a></div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
    </div>

Answer 1

你可以使用这个例子:

//HTML

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

//JS

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{  //config number of item here 
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
})