Hi. I’m using from framework7 v 3.4.2. I have 3 tabs in my app. In the second tab (products), I have a swipper slider with 4 slides. The image of the sliders will have loaded by the server from an ajax request.I use from bellow code in my html file :
<div class="swiper-container swiper-init demo-swiper" data-pagination='{"el": ".swiper-pagination"}'> <div class="swiper-wrapper"> <div class="swiper-slide" > <img src="" id="yen_slider1_file" style="height: 200px;width: 100%;" /> </div> <div class="swiper-slide"> <img src="" id="yen_slider2_file" style="height: 200px;width:100%;"/> </div> <div class="swiper-slide"> <img src="" id="yen_slider3_file" style="height: 200px;width:100%;"/> </div> <div class="swiper-slide"> <img src="" id="yen_slider4_file" style="height: 200px;width:100%;"/> </div> </div> <div class="swiper-pagination"></div> <!-- Add Arrows --> <!-- <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div>--> </div>
And in my js file :
var swiper = app.swiper.create(’.swiper-container’, {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
});
var swiper = app.swiper.get(’.swiper-container’);
swipertimerDur = setInterval(function () {
swiper.slideNext();
}, 7000);
When the application is initiating, one ajax request will load images from the server and change the src property of the image. When I open the product category (under 28 seconds)everything is ok But when I open other tabs and I come back to the product tab(after 28 seconds), Slider has stopped at the latest slide and doesn’t work anymore.The last slide has “swiper-slide swiper-slide-active” class and the preview slide has “swiper-slide swiper-slide-prev” class but the next class has removed and it won’t add to the first slide anymore.
What do I have to do?