Swiper + lazy loading....any possibility to load the images of the next hidden slide before it is shown?

Swiper + lazy loading… is it possible to load also the next hidden slide…

The reason it is simple,

I am making a mobile APP that require a gallery in this case I use swiper…
this gallery it is long for some search results, for example a list of all hotels in London available to book…

But I want to show only two slides on screen for small devices and for iPad let us say 4 slides…

When I use Lazy Loading I can see that the next slide when I swipe I have to wait lazy loading to load it before it is shown…and this is correct… but…

I want to know if it is possible to make the lazy loading to load via a parameter the next hidden images maybe the next one or two so when the user swipe to see more they are already loaded and user do not have to wait all the time for the image to show…

it is like loading images on the background before they are shown to the user… so make believe the user they are already loaded all the time…

this will be fabulous to work like this…

it is like saying show two but load on background 3 for small mobiles
it is like saying show four but load on background 5 for ipad

any ideas?


Hi, im pretty sure thath f7 swiper is the same as idangero swiper (also nolimits4web work)
maybe @nolimits4web can confirm this.

so try like this: (this is not f7 code, just change it to your needs)

var swiper = new Swiper('.swiper-container', {
      // Enable lazy loading
      lazy: {
        //  tell swiper to load images before they appear
        loadPrevNext: true,
        // amount of images to load
      	loadPrevNextAmount: 2,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',




thanks for the info… yes definitely I will check that… let you know if it works!!

Do you know if this is correct to pass these parameters as data- in the HTML code of swiper?

I am trying

data-lazy='{"enabled": true, "loadPrevNext": true, "loadPrevNextAmount": 2}' data-loop="false"

Sry i dont know, you have to try.

1 Like

and it worked thanks now it loads the next slides before lazy loading spinner appears and create a sensation that all images are loaded and this is a smooth behaviour!! :slight_smile: thanks

1 Like