Swiper.js The slide does not change

[quranmehr]

Title: Issue with Applying Styles in Version 8.3.0
framework7-bundle.js
Text:
Hello,

I'm facing an issue with applying styles in version 8.3.0 and I need your help to solve it. In version 7.1.5, the following code worked perfectly, but after upgrading to version 8.3.0, this code doesn't execute:

html
Copy code
<style>
.scroll {
overflow: auto;
height: 100%;
}
</style>

      <style>
          .swiper {
            width: 100%;
            height: 100%;
          }
      
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
      
          .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .scroll{
              overflow: auto;
              height: 100%;
          }
      </style>

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="scroll">Slide 1
                ...
            </div>
        </div>
        <div class="swiper-slide">
            <div class="scroll">Slide 2
                ...
            </div>
        </div>
        <div class="swiper-slide">
            <div class="scroll">Slide 3
                ...
            </div>
        </div>
    </div>
</div>
        var swiper = app.swiper.create('.swiper', {
          speed: 100,	
          spaceBetween: 10,
          allowTouchMove: true,	
          initialSlide: 0,			
          loop: true,
        })

Could you please advise on why the styles are not being applied in the new version and how I can resolve this issue?

Thank you.