Loop "losing" one image after full loop due to duplicate logic

[MM3y3r]

So after i loop through one full cycle, the next tag loses its src value and is therefore blank. I see the "duplicate" logic behind the scenes creates another image tag. So if i have a gallery of 5 images, there is actually a 6th one created. That one misses some properties within its HTML element.

Original: <img alt="Test" class="testClass" src="source" title="title">

Duplicate when looping: <img alt="Test" class="testClass">

As additional info, my element within the swiper slide has this structure:

<swiper slide>
     <image container>
          <actual image/>
     <text bar below image>
          <some text/>
          <copyright text/>

The missing src properties are occuring within the actual images img tag.

I tried all i can on my side. Please fix.

[davidnguyen11]

Solution

So to solve this problem. I use the slideChange event only for loop mode.

For example:

I have 5 slides with the loop mode. The data can be visualized like this

5 1 2 3 4 5 1 // length: 7

As you can see to reach to the final slide. We have 2 ways

First is from 4 -> 5

We could check

if (prevSlide === n - 3 && currentSlide === n - 2) {
   // do something here
}

Second is from 1 -> 5

if (prevSlide === 1 && currentSlide === 0) {
   // do something here
}

[theskillwithin]

is #394 related to this?

[arnaudjnn]

I have the same issue with next/image component? Do you have an example with this component?

[theskillwithin]

checkout swiper the library this is a wrapper around natively supports react now https://swiperjs.com/react