Question

我正在尝试使用单独的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，移动Chrome和移动Firefox中无效。我做错了什么？我认为，这个问题可能是在其他浏览器中的转换支持......第二个问题：如何在移动设备上看到只有一个项目？所以在PC上我可以看到4个项目，在移动设备上只有1个项目。

项目如下：

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

Answer 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));
 }
});

Bootstrap 3.3.4多项目滑块（轮播）

1 个答案: