Bootstrap 5 中的垂直輪播

Question

我正在嘗試在引導程序 5 上創建一個垂直輪播。我正在使用此代碼作為參考。 我知道它是建立在不同版本的引導程序上的，但我似乎無法將它翻譯成引導程序 5。到目前為止我有這個。 運行時，網站是空白的。 我也不確定我是否在我的 html 中正確鏈接了 CSS 和 JS。

HTML

    <html lang="en">
<head>
    
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript"src="{{ url_for('static', filename='js/scripts.js')}}"></script>

    <link rel="stylesheet/less" type="text/css" href="{{ url_for('static', filename='less/mystyles.less')}}">

    <meta charset="utf-8">
    <title>Document</title>

</head>
<body>
  
    <div class="carousel slide vertical" id="carousel-vertical" data-bs-ride="carousel">
        <ol class="carousel-indicators">
          <li data-bs-target="#carousel-vertical" data-bs-slide-to="0" class="active"></li>
          <li data-bs-target="#carousel-vertical" data-bs-slide-to="1"></li>
          <li data-bs-target="#carousel-vertical" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </div>



</body>
</html>

JS

    $(document).ready(function() {
    var delta = 0;
    var scrollThreshold = 5;
  
    // detect available wheel event
    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
        document.onmousewheel !== undefined ? "mousewheel" :         // Webkit and IE support at least "mousewheel"
        "DOMMouseScroll";                                            // let's assume that remaining browsers are older Firefox
  
    // Bind event handler
    $(window).on(wheelEvent, function (e) {
        // Do nothing if we weren't scrolling the carousel
        var carousel = $('.carousel.vertical:hover');
        if (carousel.length === 0)  return;
  
        // Get the scroll position of the current slide
        var currentSlide = $(e.target).closest('.item')
        var scrollPosition = currentSlide.scrollTop();
  
        // --- Scrolling up ---
        if (e.originalEvent.detail < 0 || e.originalEvent.deltaY < 0 || e.originalEvent.wheelDelta > 0) {
            // Do nothing if the current slide is not at the scroll top
            if(scrollPosition !== 0) return;
  
            delta--;
  
            if ( Math.abs(delta) >= scrollThreshold) {
                delta = 0;
                carousel.carousel('prev');
            }
        }
  
        // --- Scrolling down ---
        else {
            // Do nothing if the current slide is not at the scroll bottom
            var contentHeight = currentSlide.find('> .content').outerHeight();
            if(contentHeight > currentSlide.outerHeight() && scrollPosition + currentSlide.outerHeight() !== contentHeight) return;
  
            delta++;
            if (delta >= scrollThreshold)
            {
                delta = 0;
                carousel.carousel('next');
            }
        }
  
        // Prevent page from scrolling
        return false;
    });
  })

CSS（少）

.carousel .item {
  padding-bottom: 720/1280 * 100%;
  background-size: cover;
  
  &:nth-child(1) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 1'); }
  &:nth-child(2) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 2'); }
  &:nth-child(3) { background-image: url('https://via.placeholder.com/1280x720?text=Slide 3'); }
}

.carousel.vertical .carousel-inner > .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.vertical .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
    -ms-transition: -ms-transform .6s ease-in-out;
    -o-transition: -o-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
.carousel.vertical .carousel-inner > .item.next,
.carousel.vertical .carousel-inner > .item.active.right {
    top: 0;
    -ms-transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
.carousel.vertical .carousel-inner > .item.prev,
.carousel.vertical .carousel-inner > .item.active.left {
    top: 0;
    -ms-transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
.carousel.vertical .carousel-inner > .item.next.left,
.carousel.vertical .carousel-inner > .item.prev.right,
.carousel.vertical .carousel-inner > .item.active {
    top: 0;
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.carousel.vertical .carousel-inner > .active {
  top: 0;
}
.carousel.vertical .carousel-inner > .next,
.carousel.vertical .carousel-inner > .prev {
  top: 0;
  height: 100%;
  width: 100%;
}
.carousel.vertical .carousel-inner > .next {
  left: 0;
  top: 100%;
}
.carousel.vertical .carousel-inner > .prev {
  left: 0;
  top: -100%
}
.carousel.vertical .carousel-inner > .next.left,
.carousel.vertical .carousel-inner > .prev.right {
  top: 0;
}
.carousel.vertical .carousel-inner > .active.left {
  left: 0;
  top: -100%;
}
.carousel.vertical .carousel-inner > .active.right {
  left: 0;
  top: 100%;
}

.carousel.vertical .carousel-indicators,
.carousel-indicators-vertical {
  right: 20px;
  top: 50%;
  transform: translate(-50%);
  bottom: auto;
  left: auto;
  width: auto;
  margin: 0;
  padding: 0;

  li {
    display: block;
    margin: 5px 0;
  }
}

Answer 1

1) 為 Bootstrap 獲得正確的設置：

您有2 種使用框架的方法 ->下載文件或鏈接文件
你應該使用哪一個？ 我更喜歡下載文件，所以我可以 go 看看發生了什么。 它還允許我從源代碼中修改我想要的東西，而不是用我自己的 CSS / JS 文件執行“訂單/反訂單”。
在哪里獲得這些鏈接- >在引導程序“入門”部分（主頁 - 鏈接在這里）
在哪里下載文件？ -> 在 Bootstrap 下載部分（這里）
你應該把鏈接/腳本放在哪里？ -> 鏈接位於 HTML 的head ，但我真的建議將腳本放在body結尾之前。 為什么？ 因此，您的HTML結構/元素已加載，然后只有您可以將事件偵聽器和修飾符放在這些加載的元素上。

2）如何使旋轉木馬垂直？

它目前是如何工作的？ 輪播使用 Bootstrap 框架在水平模式下工作。 如果您將 go 放入他們的 CSS 文件中，您將了解它是如何工作的。 它主要使用float: left 、 display:none和transform: translateX(...)屬性使其水平工作。
你必須怎么做才能使它垂直？ 好吧，您需要從代碼中獲取float:left並且您需要將transform-:translateX(...)更改為transform-:translateY(...)
過渡，可怕嗎？ 我知道，它看起來不太好。 首先，您可以做的一件事是使其不那么“跳躍”，將固定height設置為carousel-inner class。
如果您希望按鈕（下一個/上一個）是垂直的，您將需要處理它們的定位（目前，它們的類在left: 0 / right: 0 。這些類是： .carousel-control-prev /.carousel-control-next