Question

以下是来自codepen的示例引导程序轮播，以及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

Answer 2

您可以使用现有的转盘库，例如Lightslider。我认为它符合您的要求。

看一下第一个例子，它支持响应性

$(document).ready(function() {
    $('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });  
});

另一种选择是Slick。我在我的一些项目中使用它，它就像一个魅力。

Answer 3

bx-slider是另一种选择 - 允许在小视口上显示单个图像

Answer 4

Bootstrap中的Carousel本身没有响应......

如果你需要一个响应式滑块，那么你需要添加...像Slick（由@miquelarranz提到）这样的东西。

如果您需要布置4个项目，请将每个.item <div>的内部内容视为迷你窗口......因此，您需要创建响应式布局。

此外...手机的尺寸将设为xs，因此您需要使用.col-xs-*

有关工作示例，请参阅此JSFiddle。

在小型设备的同一行中显示轮播

4 个答案: