Блог

Привет, ребята, я пытаюсь создать слайдер карусели с несколькими элементами или объектами (вертикальный), поэтому я попробовал что-то вроде этого, но мой скрипт отстой и явно неправильный, и мне нужна помощь thnx.

 <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>