Question

我尝试使用bootstrap创建多个项目轮播。我的问题是它将所有3个项目移动到1而不是一个。请在此处查看演示：

http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview

  $('#myCarousel').carousel({
    interval: 10000
  })
  console.log($('.item'))
  $('.item').each(function() {

    var next = $(this).next();
    console.log(next);
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });

Answer 1

Bootstrap在3.3.0中添加了CSS3轮播转换。见#13074

添加以下css修复它：

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(33%, 0, 0);
  -ms-transform: translate3d(33%, 0, 0);
  -o-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}


.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(-33%, 0, 0);
  -ms-transform: translate3d(-33%, 0, 0);
  -o-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}

Bootply

Bootstrap Carousel Multi Items一次移动一个项目

1 个答案: