Swipper Slider will stop after tab change


#1

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?


#2

Issue is autoplay, you need to disable autopay when tab becomes inactive,

$('.some-tab').on('tab:hide', () => {
  // disable Swiper's autoplay in this tab
});
$('.some-tab').on('tab:show', () => {
  // enable autoplay on tab show
});

Also, you have enabled both autoplay and you are trying to do the same with setInterval. Remove your setInterval code