swiper-wrapper z-index effect-coverflow

[clinvest]

Hi all,

I have a problem on my carousel, some of my elements are not clickable / focusable becaue the "swiper-wrapper" goes over it. It work on chrome because we can click "throught it" but not on safari, elements are not clickable.

I added a background on the swiper-wrapper to understand the problem.

Please see the screenshots below. While sliding, on some slides the "wrapper" goes over the slide thus the user cannot interact anymore with the elements in the slide.

Any idea how to fix that?

My script config:

import { createComponent } from '../utils/alpine'
import Swiper from 'swiper';
import { Navigation, EffectCoverflow } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/effect-coverflow';

export default createComponent(() => ({

    carouselInstance: null,

    init(initial = 0) {

        const swiper = new Swiper('.category-slider .swiper', {
            modules: [Navigation, EffectCoverflow],
            effect: "coverflow",
            direction: 'horizontal',
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            initialSlide: initial,
            centeredSlides: true,
            rewind: true,
            slidesPerView: 3,
            coverflowEffect: {
                rotate: 0,
                stretch: 85,
                depth: 200,
                modifier: 1,
                slideShadows: true,
            },
        });

    }
    
}))

[anchsk]

Hi,
I've had the same issue but with the vertical swiper. The wrapper was covering half of the screen and preventing the clicks.

What helped me was to set

.swiper-wrapper {
  height: 0 !important;
}

Maybe, for the horizontal one, setting the width: 0 would help.