Вертикальная карусель FancyApp не работает. Есть советы, как решить эту проблему? ⇐ CSS

[Anonymous]

Я строю карусель немного иначе, чем обычно, чтобы это было возможно, мне нужно, чтобы она была вертикальной из-за анимации, но прежде чем создавать что-либо еще, модуль карусели Fancyapp по какой-то причине не может справиться с каруселью вертикальный. Я пробовал разные способы вытащить эту вертикальную карусель, но она либо вообще не удерживает карусель, либо тянет горизонтально. Есть какие-нибудь советы, как решить эту проблему?
https:// codepen.io/Erick-Moura-Ruiz-Guedes-Cardoso/pen/oNOJrZJ
HTML

Код: Выделить всё

NOSSOS NÚMEROS



600 km
de barreiras instaladas


28 cidades
onde produziu barreiras


58 rodovias
mais seguras graças as nossas barreiras


30 empresas
que optaram pela Serguvia

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);
}

Классы и параметры определяют
Мне нужно сделать что-то подобное этому, у меня уже было представление о коде для прокрутки по клику на следующей и предыдущей, но без вертикальной карусели анимация была бы не очень хорошей.
пример
Посоветуйте, как решить эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/783 ... solve-this