html - 我如何制作具有多个项目引导程序和 jquery 的垂直轮播滑块

Question

大家好，我正在尝试制作多个项目或对象轮播滑块（垂直），所以我尝试了类似的方法，但我的脚本显然很糟糕而且错误，我需要一些帮助。

<div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="500000000">
                 <div class="carousel-inner vertical">
    
    
                <div class="active item">
                        <div class="services-2 p-4 d-flex ftco-animate"data-target="#carousel-main" data-slide-to="0">
                            <div class="icon">
                                <span class="flaticon-engineer"></span>
                            </div>
                            <div class="text">
                                <h3>24/7 Help Support</h3>
                                <p>Separated they live in. A small river named Duden flows</p>
                            </div>
                        </div>
    
              </div>
    
              <div class="item">
       <div class="services-2 p-4 d-flex ftco-animate"data-target="#carousel-main" data-slide-to="3">
         <div class="icon">
           <span class="flaticon-engineer-2"></span>
         </div>
         <div class="text">
           <h3>24/7 Help Support</h3>
           <p>Separated they live in. A small river named Duden flows</p>
         </div>
       </div>
    
     </div>
    
     <script>
     $('.carousel .vertical .item').each(function(){
       var next = $(this).next();
       if (!next.length) {
         next = $(this).siblings("div:first");
       }
       next.children("div").clone().appendTo($(this));
    
    
       for (var i=1;i<2;i++) {
         next=next.next();
         if (!next.length) {
           next = $(this).siblings(':first');
         }
    
         next.children().clone().appendTo($(this));
       }
     });
     </script>

这里有一些最终结果的图片：这是幻灯片的开始， 这是我开始向上或向下滚动的时候

我使用了一些风格

    <style>
.carousel-inner.vertical {
  height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.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 {
    -webkit-transform: translate3d(0, 33.33%, 0);
    transform: translate3d(0, 33.33%, 0);
    top: 0;
  }
  .carousel-inner.vertical > .item.prev,
  .carousel-inner.vertical > .item.active.left {
    -webkit-transform: translate3d(0, -33.33%, 0);
    transform: translate3d(0, -33.33%, 0);
    top: 0;
  }
  .carousel-inner.vertical > .item.next.left,
  .carousel-inner.vertical > .item.prev.right,
  .carousel-inner.vertical > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    top: 0;
  }
}

.carousel-inner.vertical > .active {
  top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
  top: 0;
  height: 100%;
  width: auto;
}
.carousel-inner.vertical > .next {
  left: 0;
  top: 33.33%;
  right:0;
}
.carousel-inner.vertical > .prev {
  left: 0;
  top: -33.33%;
  right:0;
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
  top: 0;
}
.carousel-inner.vertical > .active.left {
  left: 0;
  top: -33.33%;
  right:0;
}
.carousel-inner.vertical > .active.right {
  left: 0;
  top: 33.33%;
  right:0;
}

#carousel-pager .carousel-control.left {
    bottom: initial;
    width: 100%;
}
#carousel-pager .carousel-control.right {
    top: initial;
    width: 100%;
}
</style>

标签： htmljquerycss