顯示帶有引導輪播的預覽（上一張和下一張圖片）

Question

我在顯示帶有引導輪播的上一個和下一個圖像/幻燈片的預覽時遇到問題。 我已按照此 StackExchange文章中的說明進行操作，但是無論我重新啟動並重新編寫多少次，它都不會正確顯示。

它不斷被截斷並顯示在下面。

我創建了一個小提琴來演示該問題。

我不想顯示很多下一張幻燈片，也許兩邊都值得20像素，主要是為了提示用戶進行滑動/滑動。

    .carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}

對於我出錯了的任何幫助，將不勝感激。

非常感謝

安東

Answer 1

我建議您不要重新發明輪子，而是選擇已經具有您正在尋找的功能或具有類似功能的滑塊。

在我看來， Slick是最好的滑塊之一，它具有大量的自定義可能性。 在您的情況下，我將仔細研究Slick的“ 中心模式 ”。

實現目標所需要做的就是更改樣式和slidesToShow屬性。