垂直 fancyapp 轮播不起作用，有关如何解决此问题的任何提示吗？

Question

我正在构建一个与平常稍有不同的轮播，为了实现这一点，我需要它是垂直的，因为它的动画，但在构建其他任何东西之前，fancyapp 的轮播模块由于某种原因无法处理垂直的轮播。我尝试了不同的方法来拉动这个垂直的旋转木马，但要么它甚至不能固定旋转木马，要么它水平拉动，关于如何解决这个问题有什么建议吗？

https://codepen.io/Erick-Moura-Ruiz-Guedes-Cardoso/pen/oNOJrZJ

HTML

<!-- Fancybox Carrossel -->
<script src="https://twist-dev.com/modelo/wp-includes/js/carousel/carousel.umd.js"></script>
<link rel="stylesheet" href="https://twist-dev.com/modelo/wp-includes/js/carousel/carousel.css"/>   

<div id="Carrossel-falso" class="hero">
        <div class="hero-wrap">
            <div class="hero__left col">
                <h1>NOSSOS NÚMEROS</h1>
            </div>
            <div class="hero__right col">
                <div class="hero__items f-carousel is-vertical is-rtl">
                    <div class="hero__item">
                        <div class="item__cost">600 km</div>  
                        <div class="item__name">de barreiras instaladas</div>
                    </div>  
                    <div class="hero__item">
                        <div class="item__cost">28 cidades</div>  
                        <div class="item__name">onde produziu barreiras</div>
                    </div>
                    <div class="hero__item">
                        <div class="item__cost">58 rodovias</div>  
                        <div class="item__name">mais seguras graças as nossas barreiras</div>
                    </div>
                    <div class="hero__item">
                        <div class="item__cost">30 empresas</div>  
                        <div class="item__name">que optaram pela Serguvia</div>       
                    </div>
                </div>
            </div>  
        </div>
    </div>

<div class="teste"> 

</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #555;
  font-family: "Oswald";
  height: 100vh;
}

/* Estilizando a barra de rolagem */
::-webkit-scrollbar {
  width: 0;  /* Oculta a barra de rolagem no Chrome/Safari */
}

/* Estilizando a alça (thumb) da barra de rolagem */
::-webkit-scrollbar-thumb {
  background: transparent;  /* Torna a alça (thumb) invisível */
}

.hero {
  padding: 20px;
  max-height: 100vh;
  background: #000a;
  color: #fff;
  display: flex;
}

.hero-wrap {
  width: 100%;
  background: #000a;
  display: flex;
  padding: 20px;
  position: relative;
}

.col {
  width: 50%;
}

.hero__left {
  padding: 25px;
}

.item__name {
  font-size: 20px; 
  width: 200px; 
}

.hero__left h1 {
  font-size: 45px;
  font-weight: 300;
  width: 300px;
}

.hero__right {
  position: sticky !important;
  right: 20px;
  padding-left: 20px;
  top: 0;
  bottom: 0;
}

.hero__item {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #111;
  border: 4px solid #333;
  height: auto;
  margin: 5px 0;
  transition: all 0.4s ease-out;
  font-size: 30px;
}

.hero__item:last-child {
  margin: 0;
}

.hero__item.active {
  border: 4px solid #0047ffaa;
  box-shadow: 0 0 20px #0332ad;
}

.teste{
  height: 100vh;
  width: 100%;
  
}

JS

var carouselItems = document.querySelectorAll('#Carrossel-falso .hero__item');
    carouselItems.forEach(function(item) {
        item.classList.add('f-carousel__slide');
    });

  const container = document.querySelector("#Carrossel-falso .f-carousel");
    if (container) {
        var options = {
            transitionEffect: "vertical",
            Dots: false,
            Navigation: true,
            infinite: false,
            axis: "y",
            slidesPerPage: "1",
        };
      
        new Carousel(container, options);
    }

我需要做类似的事情，我已经有了滚动点击下一个和上一个的代码的想法，但是如果没有垂直轮播，动画就不会很好

有关如何解决此问题的任何提示。

Answer 1

将容器的高度设置为小于内容的高度，例如：

.hero__items {
  height: 100px;
}

参见 https://fancyapps.com/carousel/getting-started/#add-markup