swiper

swiper copied to clipboard

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-lazy-load-images-forked-ppqb7?file=/index.html

Bug description

LoadPrevNextAmount on lazy options not working when using grid (didn't test it alone)

Expected Behavior

Use loadPrevNextAmount to calculate how many pictures must be loaded for slide

Actual Behavior

Always is loaded 1 picture

Swiper version

7.2

Platform/Target and Browser Versions

Windows 10 Chrome 95

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

In https://github.com/nolimits4web/swiper/blob/master/src/modules/lazy/lazy.js#L167

Something like:

        const amount = params.loadPrevNextAmount;
        const rows = swiperParams.grid ? swiperParams.grid.rows : 1;
        const spv = slidesPerView * rows;

        const maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
        const minIndex = Math.max(activeIndex - Math.max(spv, amount), 0);
        // Next Slides
        for (let i = activeIndex + spv; i < maxIndex; i += 1) {
          if (slideExist(i)) loadInSlide(i);
        }

?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I am encountering the exact same issue, has anyone found a workaround or a fix ?

Based on Dantio's answer, the solution that I found is the following: https://github.com/nolimits4web/swiper/blob/master/src/modules/lazy/lazy.js#L167

if (params.loadPrevNext) {
    if (slidesPerView > 1 || params.loadPrevNextAmount && params.loadPrevNextAmount > 1) {
      const amount = params.loadPrevNextAmount;
      const rows = swiperParams.grid ? swiperParams.grid.rows : 1;
      const spv = slidesPerView * rows;

      const maxIndex = Math.min((activeIndex+1) * spv + Math.max(amount, spv), slides.length);
      const minIndex = Math.max(activeIndex*spv - Math.max(spv, amount), 0);    
      
      // Next Slides
      for (let i = (activeIndex+1)*spv; i < maxIndex; i += 1) {
        if (slideExist(i)) loadInSlide(i);
      }

      // Prev Slides
      for (let i = minIndex; i < activeIndex*spv; i += 1) {
        if (slideExist(i)) loadInSlide(i);
      }

Swiper v9 doesn't lazy module anymore. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.