bootstrap carousel - 在 bootply 上工作，但不在网站上

Question

我创建了一个轮播，它显示 6 个徽标，然后前进，一个。在 Bootply 上，一切正常：http://www.bootply.com/RkOFbrTp6F

当我将它添加到网页中时，请参见此处：http://url.kybernaut.cz/1e，它可以工作，但那里的运动更加动态，就像整行被移动并再次向前加载一样，而不是 Bootply 上缓慢而平静的运动。

我该如何解决？代码看起来相同。这是jquery代码：

jQuery("#sponzoriCarousel").carousel({
          interval: 4000
        });

        jQuery('.carousel .item').each(function(){
          var next = jQuery(this).next();
          if (!next.length) {
            next = jQuery(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo(jQuery(this));

          for (var i=0;i<4;i++) {
            next=next.next();
            if (!next.length) {
                next = jQuery(this).siblings(':first');
            }

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

提前非常感谢！

Answer 1

Starting with 3.3.0 version Bootstrap 使用transform-3d 进行轮播的过渡。

您在 Bootsply 使用的是 Bootstrap 3.0.2。但是你的网页有 a very strange version 的 Bootstrap。它的 URL 中有 3.1，但它包含来自 Bootstrap 3.3.0 的代码片段：

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -moz-transition: -moz-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    perspective: 1000;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

尝试从您的bootstrap.css 中删除此片段或使用the real Bootstrap 3.0.2。我认为这会有所帮助。