Swiper z-index position superimposed.

[mifeex]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-react-effect-fade-forked-154frg?file=%2Fsrc%2FApp.jsx%3A36%2C43

Bug description

Hi!
We faced with bug when swiper z-index position superimposed. I.e. we see all slides at one screen but first slide is over the second second is over third etc. You can see this bug at the picture I've attach.

The code which we use to setup the swiper is:

const options: SwiperOptions = {
    allowTouchMove: true,
    autoplay: {
      delay: 8000,
      disableOnInteraction: false,
    },
    autoHeight: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true,
    },
    loop: true,
    pagination: {
      bulletClass: slider('bullet'),
      bulletActiveClass: slider('bullet-active'),
      horizontalClass: slider('horizontal'),
    },
    slideToClickedSlide: true,
    observer: true,
    modules: [Autoplay, EffectFade, Navigation, Pagination],
  }

slider.css

.slider {
    width: 100%;
    overflow: visible;

    &__bullet {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: 0 11px;
      background: var(--transparent-background-3);
      filter: blur(2px);
      border-radius: var(--border-radius-circle);
    }

    &__bullet-active {
      width: 12px;
      height: 12px;
      background: var(--transparent-background-2);
    }

    &__horizontal {
      width: 100%;
      position: absolute;
      display: flex;
      top: 13px;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: 0.3s opacity;
      transform: translate3d(0, 0, 0);
      z-index: 1;

      @media (--desktop-s) {
        top: 26px;
      }
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

UPD: I found solution. Almost all indexes are NaN so we cannot interact with Swiper.

<Swiper
  {...options}
  {...props}
  onSlideChange={(swiper) =>
    isNaN(swiper.realIndex) && swiper.slideTo(0)
  }
>

Expected Behavior

No response

Actual Behavior

No response

Swiper version

^9.2.0

Platform/Target and Browser Versions

macOS Chrome, Windows Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• 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

[nolimits4web]

The issue demo link doesn't contain issue, so seems to be resolved

[sedx]

Faced same issue (with NaN in activeIndex). Swiper version 10.0.4. But we don't use Virtual module

Fixed as recommenced:

<Swiper
  {...options}
  {...props}
  onSlideChange={(swiper) =>
    isNaN(swiper.realIndex) && swiper.slideTo(0)
  }
>

BTW Reproduction link has issue with NaN in activeIndex ;)