Swiper (slide images) problem

1

HI all

Im with a problem withe swiper images,

swiper is on top of homepage and when i open a second page and go back is fine swiper work well, but if i open a third page like [ home -> second page -> thirdpage ] and go back to second them homepage the swiper just dont slide and swiper pagination disapear… any one know why?

2

You need to init Swiper correctly, within pageInit event/callback of the home page

3

something is wrong …

i have on index.html first page like this:

fist page

        <div data-name="home" class="page">

        </div>

second page

        <div data-name="second" class="page">

        </div>

third page

        <div data-name="third" class="page">

        </div>

when i use this code inside document ready

$$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e) {
alert(“home”);
})

is trigger when i go back from third to second page and should be trigger when i go back from second to home

anyone know why this is happen ?

4

this is normal, when you back from third to second page, f7 will load the previous page of second page as well, you can always see the current and previous page is in DOM

5

ok but i cannot get work page:init fire when home page is on screen

always fire when o came from third page to second this is fire
$$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e) {
alert(“home”);
})

how i can fire “home” when i came from second to home?

:s

6

page:afterin event

7

Conclusion to get this work, and thanks for support!

               <div  class="swiper-container demo-swiper" >
                    <div class="swiper-pagination"></div>
                         <div class="swiper-wrapper">
                         <div class="swiper-slide" ><img></div>
                    </div>
               </div>

Now on document ready :slight_smile:

var swiper = app.swiper.create(’.swiper-container’, {
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
},
spaceBetween: 10,
autoplay: {
delay: 5000,
},
loop: true
});

now to prevent go back and slide broke i use this:

$$(document).on(‘page:afterin’, ‘.page[data-name=“home”]’, function (e,page) {
console.log(page.name);
var swiper = app.swiper.create(’.swiper-container’, {
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
},
spaceBetween: 10,
autoplay: {
delay: 5000,
},
loop: true
});

})
1 Like