javascripthtmlswiper.jscoverflow

swiper.js w/ coverflow causing 'mouse' problems?

sceenshot

<html>
    <head>
        <style>
            .swiper-slide {
                width: 75px !important;
                cursor: no-drop;
            }
        </style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
    </head>

    <body>
        <div class="swiper photoContainer swiper-horizontal" style="height: 75px; width: 300px">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
                <div class="swiper-slide">
                    <img src="graphics/advFeature.png" />
                </div>
            </div>
        </div>

        <script>
            photoSwiper = new Swiper(".photoContainer", {
                direction: "horizontal",
                nested: true,
                slidesPerView: "auto",
                centeredSlides: true,
                effect: "coverflow",
                coverflowEffect: {
                    rotate: 20,
                    slideShadows: true,
                    depth: 250
                    //stretch: 0,
                },
                spaceBetween: 1
            });
        </script>
    </body>
</html>

with the code above, recognition of a slide in css (or for a click event etc) is sporadic. i had working code in an older version where i could hover or click on ANY visible portion of a slide, even partly covered and far to one side, and all recognition of the correct slide worked as expected. now some (most) seem to be ignored, and which ones work change as you swipe the content.

i have tried all kinds of suggestions, like z-indexing, on:click event in the swiper init, slidetoactive etc:false.

note that if i take out coverflow works fine immediately!

in the screenshot, only the third slide, the right half of the fifth, and the sixth one seem to be recognized; cursor changes.

it's as if there is a disconnect between normal browser/click/touch/mouse registration and the slides now...

Solution

  • For some reason .swiper-wrapper was obscuring some slides below it. I added a width 0% for it, so it won't interfere with that.

    .swiper-slide {
  width: 75px !important;
  cursor: no-drop;
}

.swiper-slide:hover {
  border: 2px solid red;
}

.swiper-wrapper {
  width: 0% !important;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

<body>
  <div class="swiper photoContainer swiper-horizontal" style="height: 75px; width: 300px">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
      <div class="swiper-slide">
        <img src="https://picsum.photos/75" />
      </div>
    </div>
  </div>

  <script>
    photoSwiper = new Swiper(".photoContainer", {
      direction: "horizontal",
      nested: true,
      slidesPerView: "auto",
      centeredSlides: true,
      effect: "coverflow",
      coverflowEffect: {
        rotate: 20,
        slideShadows: true,
        depth: 250
        //stretch: 0,
      },
      spaceBetween: 1
    });
  </script>
</body>

</html>