Swiper bugs found in Framework7

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