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。我认为这会有所帮助。

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

1 个答案: