Bootstrap 3.3.4 多项目滑块（轮播）答案

【问题标题】：Bootstrap 3.3.4 Multi item slider (Carousel)Bootstrap 3.3.4 多项目滑块（轮播）
【发布时间】：2015-08-19 19:15:45
【问题描述】：

我正在尝试使用单独的 4 个项目来使用 Boostrap 轮播。我使用这个 JS 代码：

$('.carousel[data-type="multi"] .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));
  }
});

还有这个 CSS：

@media only screen (max-width: 767px) 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 only screen (min-width: 767px) and (max-width: 992px ) 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 only screen (min-width: 992px ) and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(25%, 0, 0);
      -moz-transform: translate3d(25%, 0, 0);
      -ms-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);
      -moz-transform: translate3d(-25%, 0, 0);
      -ms-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
  }
}

此解决方案适用于最新的 Chrome，但不适用于 Firefox、IE、Mobile Chrome 和 Mobile Firefox。我做错了什么？我认为，这个问题可能在于其他浏览器的转换支持......第二个问题：如何在移动设备中只显示一项？所以在 PC 上我可以看到 4 个项目，在移动设备上只能看到 1 个项目。

项目如下所示：

<div class="item active">
    <div class="col-md-3 col-sm-6 col-xs-12">
      something...
    </div>
</div>

【问题讨论】：

标签： twitter-bootstrap carousel

【解决方案1】：

我为您的问题找到了this solution。我在一行中使用了 4 个项目，并像这样更改了 CSS：

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    -ms-transform: translate3d(25%, 0, 0);
    -o-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);
  -ms-transform: translate3d(-25%, 0, 0);
  -o-transform: translate3d(-25%, 0, 0);
  transform: translate3d(-25%, 0, 0);
}

.carousel-inner .active.left { left: -25%; }
.carousel-inner .active.right { left: 25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev        { left: -25%; }

而javaScript的代码是这样的：

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

【讨论】：