固定铬，即和边缘上的垂直引导传送带

我目前正在建立一个网站，其中包含一个旋转木马，应该垂直滑过它的项目。目前，它使用Firefox时应该可以正常工作，但是当我使用Chrome或Internet Explorer进行测试时，转换不会按照原样进行。我测试了不同的解决方案，我可以找到这里和其他网站，但没有一个为我工作。固定铬，即和边缘上的垂直引导传送带

 <div id="brick-slider" class="carousel vertical slide first-item" data-ride="carousel"> 
<ol class="carousel-indicators"> 
    {% for item in items %} 
    {% if loop.index0 == 0 %} 
     <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}" class="active"></li> 
    {% else %} 
     <li class="indicator" data-target="#brick-slider" data-slide-to="{{ loop.index0 }}"></li> 
    {% endif %} 
    {% endfor %} 
</ol> 
<div class="carousel-inner vertical" role="listbox"> 
    {% for item in items %} 
    {% if loop.index0 == 0 %} 
     <div class="item active"> 
     {{ item.content }} 
     </div> 
    {% else %} 
     <div class="item"> 
     {{ item.content }} 
     </div> 
    {% endif %} 
    {% endfor %} 
</div> 
    <a class="up carousel-control" href="#brick-slider" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="down carousel-control" href="#brick-slider" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a>

这是我的标记。以下是用于垂直传输的css的两种变体。

.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 100%; 
} 

.carousel.vertical .prev { 
    top: -100%; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -100%; 
} 

.carousel.vertical .active.right { 
    top: 100%; 
} 

.carousel.vertical .item { 
    left: 0; 
}

这是我使用的第一个变体。在Firefox中它工作得很好，但是在Chrome和Edge中，活动元素没有滑出，只是消失了，然后下一个元素放松了。我希望活动元素缓解，以便您可以像标准一样查看过渡。在bootstrap中的水平旋转木马。

.carousel-inner.vertical { 
    height: 100%; 
} 

.carousel-inner.vertical .item { 
    -webkit-transition: .6s ease-in-out top; 
    -o-transition: .6s ease-in-out top; 
    transition: .6s ease-in-out top; 
} 

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner.vertical .item { 
     -webkit-transition: -webkit-transform .6s ease-in-out; 
     -o-transition: -o-transform .6s ease-in-out; 
     transition: transform .6s ease-in-out; 
     -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
     -webkit-perspective: 1000; 
     perspective: 1000; 
} 

.carousel-inner.vertical .item.next, .carousel-inner.vertical 
.item.active.right { 
    top: 0; 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
} 

.carousel-inner.vertical .item.prev, .carousel-inner.vertical 
.item.active.left { 
    top: 0; 
    -webkit-transform: translate3d(0, -100%, 0); 
    transform: translate3d(0, -100%, 0); 
} 

.carousel-inner.vertical .item.next.left, .carousel-inner.vertical .item.prev.right, .carousel-inner.vertical > .item.active { 
    top: 0; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

.carousel-inner.vertical .active { 
    top: 0; 
} 

.carousel-inner.vertical .next, .carousel-inner.vertical .prev { 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 

.carousel-inner.vertical .next { 
    left: 0; 
    top: 100%; 
} 

.carousel-inner.vertical .prev { 
    left: 0; 
    top: -100% 
} 

.carousel-inner.vertical .next.left, .carousel-inner.vertical .prev.right { 
    top: 0; 
} 

.carousel-inner.vertical .active.left { 
    left: 0; 
    top: -100%; 
} 

.carousel-inner.vertical .active.right { 
    left: 0; 
    top: 100%; 
}

有了这个第二变体，我发现here它只是相同的Firefox，它工作得很好，正是它应该做。至于Edge和Chrome，现在它会减少活动元素上方的下一个元素，然后活动元素消失。有时它甚至在活动元素后面变得缓和，并且有时从侧面而不是顶部或底部缓和。有些东西我错过了，但我无法追上它。我现在正在研究这个问题很长一段时间，所以我非常感谢这方面的帮助。

来源

2016-05-18 M. Kohn

我有同样的问题，在尝试引导v3.02的时刻，它工作正常。找到了不同之处，Bootstrap 3.6使用了transform 3d，这对于正常的水平旋转木马来说工作得很好，但它不适用于垂直滑动旋转木马，所以在垂直滑动条css规则之前，只需在CSS中覆盖这段代码即可：

@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item { 
    -webkit-transition: none; 
     -o-transition: none; 
      transition: none; 
    } 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right, 
    .carousel-inner > .item.active { 
    left: 0; 
    -webkit-transform: none; 
      transform: none; 
    } 
}

之后，用于造型垂直旋转木马的css部分。这对我有用。

来源

2016-06-01 14:23:41 Alex

固定铬，即和边缘上的垂直引导传送带

回答

相关问题