Hi, I’m trying to use the swiper slide but when I compile it into the android application the initiation of swiper is not working and there is an error log returning “Uncaught TypeError TypeError: Cannot read properties of undefined (reading ‘0’)” and here is some code below. But when I use swiper-init class to my tag the swiper is working but there is an issue the pagination and autoplay are not working but I can swipe
<div class="card no-margin no-shadow" style="background-color:transparent;">
<div class="swiper-container swiper-banner">
<div class="swiper-wrapper">
<div class="swiper-slide " >
<img src="${banner1}" class="vertical-align-middle" style="width: 100%;" alt="" srcset=""/>
</div>
<div class="swiper-slide">
<img src="${banner2}" class="vertical-align-middle" style="width: 100%;" alt="" srcset=""/>
</div>
<div class="swiper-slide">
<img src="${banner3}" class="vertical-align-middle" style="width: 100%;" alt="" srcset=""/>
</div>
</div>
<div class="swiper-pagination page-banner"></div>
</div>
</div>
at the JS
var swiper_banner = $f7.swiper.create('.swiper-banner', {
speed: 400,
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".page-banner",
}
});