Method imagesReady not getting triggered

[drosendo]

Method imagesReady not getting triggered

mySwiper.on('imagesReady', function () {
  console.log('imagesReady');
});

Can someone else confirm this.

Cheers, David

[drosendo]

Hello?

[debbygigigi]

@drosendo hi, try to put the method in the options

swiperOption: {
    pagination: {
        el: '.swiper-pagination'
    },
    on: {
        imagesReady: function () {
            alert('imagesReady');
        }, 
    },
    // some swiper options...
}

It's work for me. :)

[drosendo]

For some unknown reason it does not for me... I have exact code.... acn you put up a codepen for me to see? maybe Im missing something...

[debbygigigi]

@drosendo I just amend the official example https://jsfiddle.net/bL983fjt/

I changed the first swiperslide by adding one image

<swiper-slide>
        <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2400,c_limit/phonepicutres-TA.jpg" alt="">
</swiper-slide>

and add imagesReady callback in swiperOptionA

swiperOptionA: {
            pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
        imagesReady: function () {
            alert('imagesReady');
        }, 
    },

You can try to run it. If still have question, you can also put your code to codepen or jsfiddle

[xianshenglu]

The same question happens to me! works with init event while imagesReady can't be triggered! My problem was due to I change the data by ajax after slider component was rendered. So, can't be triggered. So, I solved this by rendering slider component in the ajax callback, then imagesReady was triggered.