Framework7 swiper fade + lazy + so jumpy imagesReady: function does not fire

is it possible to use lazy and fade and having a smooth transitions between slides…?

the problem I see is that the lazy loader works fine but when the image in the console has been loaded the transition between slides is not smooth and it looks jumpy… only after all images has been loaded the transition between current slide and next works fine…

is it possible to fix this behaviour so the look between slides after loaded is smooth and not jumpy…?

I thought about using imagesReady but this seems not to fire:
I tried:

var swiper = new Swiper(’.swiper-container’, {

on: {
init: function () {

imagesReady: function () {
  console.log('imagesReady'); // this does not fire

effect: ‘fade’,
lazy: true,
loop: true,
preloadImages: false,


I tried also this way:

swiper.on(‘imagesReady’, function() {

console.log(‘this is ready’); // this does not fire either


None of the imagesReady seems to work… my idea is when the image is ready and loaded with lazy then run a simple code like this for the image loaded before it is displayed…

something like:

$(’.swiper-slide .swiper-lazy-loaded’).css(‘transition’, ‘4s ease-in-out’);

this will make smooth the entering of the image to be displayed after loaded… specially if it is not loaded yet…

any ideas why imagesReady does not work?