Question

我一次发现了超过一个项目的非常好的旋转木马修改。以下是Bootstrap 3.3 - http://www.bootply.com/123662的示例。但不幸在点击＆lt; ＆GT;似乎不会像3.3中的Bootstrap 3.5一样滑动一个项目。以下是示例 - http://www.bootply.com/yNdE51hs8o。

有什么不对？有人可以解决这个问题吗？

HTML

<div class="col-lg-6 col-md-offset-3">
<div class="carousel slide" id="cbutelki">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/c4ca4238a0b923820.png" /></div>
    </div>
    <div class="item">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/c81e728d9d4c2f636.png" /></div>
    </div>
    <div class="item">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/eccbc87e4b5ce2fe2.png" /></div>
    </div>
    <div class="item">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/a87ff679a2f3e71d9.png" /></div>
    </div>
    <div class="item">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/e4da3b7fbbce2345d.png" /></div>
    </div>
    <div class="item">
      <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/1679091c5a880faf6.png" /></div>
    </div>
   <div class="item">
     <div class="col-lg-2"><img src="http://bagpak.thewebcookies.com/wp-content/uploads/2015/11/8f14e45fceea167a5.png" /></div>
   </div>
  </div>
  <a class="left carousel-control" href="#cbutelki" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#cbutelki" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

的.js

$('#cbutelki').carousel({
  interval: 4000
})

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

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

Answer 1

Bootstrap 3.3.5现在使用transform: translate3d（支持的地方）来获得幻灯片效果。因此，旧方法被打破了。下面是一个如何将它包含在您的示例中的示例。这是一个有效的Pen。

这是一个recent post我正在努力解决类似的问题。在帖子中解释了两个单独的媒体查询的原因。

**此外，我已更正您的Javascript，以便在for-loop中的以下行中添加额外的图片（如果您想知道为什么我的图片显示6张图片而您的图片只显示5张）：

for (var i=0;i<4;i++) {

示例：

// Override the normal settings for browsers that dont support translate3D
@media all and (min-width: 1200px) {
    .carousel-inner > .next { left: 16.6667%; }
    .carousel-inner > .prev { left: -16.6667%; }
    .carousel-inner > .active.left { left: -16.6667%; }
    .carousel-inner > .active.right { left: 16.6667%; }
}

// Override translate3D for those that do support it
@media all and (min-width: 1200px) and (-webkit-transform-3d) {
    
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right {
        left: 0;
        transform: translate3d(16.6667%, 0, 0);
      -webkit-transform: translate3d(16.6667%, 0, 0);
    }

    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left {
        left: 0;
        transform: translate3d(-16.6667%, 0, 0);
      -webkit-transform: translate3d(-16.6667%, 0, 0);
    }   
}

我应该指出，如果你想让它具有响应性，不要只使用col-lg-2（除非你只想在1200px或更大的屏幕上显示它）。如果图像的大小是问题，那么你应该看看this Codepen example，你可以看到你可以根据屏幕的宽度调整.item的数量（调整浏览器窗口的大小查看）。

此方法确实使用Modernizr作为依赖项，但您只需要相对较小的Modernizr.mq()函数。它用于确定Javascript中的宽度，以便您的功能可以相应地重新运行。示例中的Modernizr媒体查询与标准引导断点匹配，应与普通col-*-*类一起使用，以匹配.item的所需宽度。最好看一下Codepen example。这个问题有点偏僻，但信息量很少

Bootstrap和一次旋转木马上的1个项目

1 个答案: