Swiper: Not working on class 'swiper-slide' when use slider on Modal Bootstrap

Created on 22 Aug 2015 · 9Comments · Source: nolimits4web/swiper

Hi as same title. I try another and it not working slide when i call modal. BUT i resize window it working.
Can you help me fix this issue. Thanks

Source

giangmd

👍1

All 9 comments

It is issue with bootstrap. Call swiper's .update method when this modal becomes visible

nolimits4web on 22 Aug 2015

👍1

Hi
After the modal show i was add code but it until not working

$.getScript("/public/packages/swiper/swiper.min.js").done(function() {

    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // Enable debugger
        debugger: false
    });

    mySwiper.update();

});

giangmd on 24 Aug 2015

It is hard to say what is not working like that. Will be good to see live example with issue

nolimits4web on 26 Aug 2015

Yes. It's for catch event show of Modal Bootstrap. It's working now.
That's cool. Thanks.

giangmd on 29 Aug 2015

I have the same issue. These codes fixed it for me.
I think, Swiper not regconize swiper-slide before it shown. So we have to wait it for complete 'shown'
(Example on coffescript)

$('body').on 'shown.bs.modal', '#bootstrap-modal-element', ->
  newSwiper = new Swiper('.swiper-container',
    slidesPerView: 'auto'
    ....

1Rhino on 5 May 2016

👍1

@1Rhino
Yes, it's jquery event. we must recall them to work on all DOM when the page not reload.
Nice to meet you, brother!

giangmd on 18 May 2016

👍1

this is how i fixed it:

//swiper 
 window.swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    paginationType: 'progress'
});

i am using it on material design.
i hope it will help.
Cheers.

DecoGrafics on 2 Mar 2017

👍1

And this is how I fixed.

setTimeout(function() {

    var swiper = new Swiper(".swiper-container", {
        loop: true,
        autoplay: 10000,
        grabCursor: true,
        centeredSlides: true,
        paginationClickable: true,
        autoplayDisableOnInteraction: true
    });

}, 0);