固定鉻，即和邊緣上的垂直引導傳送帶

我目前正在建立一個網站，其中包含一個旋轉木馬，應該垂直滑過它的項目。目前，它使用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

固定鉻，即和邊緣上的垂直引導傳送帶

回答

相關問題