twitter-bootstrap - 在小型设备上连续显示轮播

Question

这是来自 codepen 的示例 Bootstrap 轮播这是来自 bootsnip 的一个.它们中的大多数都遵循这样的典型 HTML 结构。

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="img1.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="img2.png" class="img-responsive"></a></div>
    </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

我同意其他人的观点，最好使用其他插件来实现此功能。我建议owlcarousel2 .如果你想要一个仅 Bootstrap 的解决方案，这里是一个实现。

HTML

<div class="carousel slide multi-carousel" data-ride="carousel" data-interval="3000" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=2" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=5" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=6" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=7" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?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>

CSS

.carousel-inner .active.left { left: -100%; }
.carousel-inner .next        { left:  100% ; }
.carousel-inner .prev        { left: -100% ; }
.active > div { display:none; }
.active > div:nth-child(1) { display:block; }

@media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
      }    
  }   

@media (min-width: 768px) {
    .carousel-inner .active.left { left: -50% ; }
    .carousel-inner .next        { left:  50% ; }
    .carousel-inner .prev        { left: -50% ; }
    .active > div { display:none; }
    .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
                transform: translate3d(-50%, 0, 0);
      }    
  }   
} 

@media (min-width: 992px ) {
    .carousel-inner .active.left { left: -33% ; }
    .carousel-inner .next        { left:  33% ; }
    .carousel-inner .prev        { left: -33% ; }   
  .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }
  .active > div:nth-child(3) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(33.33%, 0, 0);
                transform: translate3d(33.33%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-33.33%, 0, 0);
                transform: translate3d(-33.33%, 0, 0);
      }    
  }      
}

@media (min-width: 1200px ) {
    .carousel-inner .active.left { left: -25% ; }
    .carousel-inner .next        { left:  25% ; }
    .carousel-inner .prev        { left: -25% ; }   
  .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }
  .active > div:nth-child(3) { display:block; }
   .active > div:nth-child(4) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(25%, 0, 0);
                transform: translate3d(25%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-25%, 0, 0);
                transform: translate3d(-25%, 0, 0);
      }    
  }      
}

JS

$('.multi-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<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

codepen link .