Bootstrap Carousel Multi Items 一次移动一个项目 [英] Bootstrap Carousel Multi Items Move One Items at once

问题描述

我尝试使用引导程序创建多个项目轮播.我的问题是它将所有 3 个项目移动到一个而不是一个.请在此处查看演示:

I've tried to create multiple items carousel using bootstrap. My problem is it moves all 3 items at ones instead just one. Please see demo here:

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

推荐答案

Bootstrap 在 3.3.0 中添加了 CSS3 轮播变换.请参阅 #13074

Bootstrap added CSS3 carousel transforms in 3.3.0. See #13074

添加以下css修复它:

Adding the following css fixes it:

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

引导

这篇关于Bootstrap Carousel Multi Items 一次移动一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！