Сетка Swiper не показывает данные в правильной последовательности ⇐ Html

[Anonymous]

У меня реализован мой проект в Angular14 с интеграцией Swiper версии 11. Я получаю выход, как показано здесь, и также применил решения, которые там предоставили, но ни один из них не работает для меня.function sx_shows(){
var swiper = new Swiper('.show-slider',{
speed: 2000,
effect: "coverflow",
loop:false,
parallax: true,
// autoplay:{
// delay: 3000,
// disableOnInteraction: false,
// pauseOnMouseEnter:true,
// },
autoplay: false,
// autoplayResume:true,
direction: 'horizontal',
slidesPerView: 1,
grid: { rows: 6, fill: 'row' },
// spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
})

}
< /code>
ts file: < /p>
ngOnInit(): void {
(function ($) {
setTimeout(function () {
sx_shows();
sx_mobile_shows();
}, 0);
})();
}
< /code>
css file: < /p>
.show-slider {
overflow: hidden;
width: 538px;
}

.show-slider-inner-wrap{
height: 108px;
width: 538px;
}

.show-slider .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

}
.swiper-wrapper {
flex-direction: unset;
height: calc(100% - 108px) / 6 !important;
}
< /code>
html file < /p>



{{i}}



< /code>
Я попробовал готовый код сетки Swiper, но он показывает все данные в одном слайдах, а другие слайды показывают пустые! Проверьте изображения! < /P>
Дайте мне знать, где я ошибаюсь! Пожалуйста, помогите мне!



Подробнее здесь: https://stackoverflow.com/questions/797 ... r-sequence