Closed
Description
Check that this is really a bug
- I confirm
Reproduction link
No Reproduction Link
Bug description
I am using swiper.js in a next.js based web
and using it in an Mobile Application as a webview in a tab bar
the swipe doesnt work at the swiper container but at the Application
can anyone help?
import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
<Swiper
modules={[Autoplay]}
slidesPerView={1}
autoplay={{ delay: 1000, disableOnInteraction: false }}
loop={true}
className={styles.container}
>
{bannerData?.map(({ imageUrl }, index) => (
<SwiperSlide
key={`${imageUrl}-${index}`}
className={styles.swiperSlide}
onClick={() => onBannerClick(bannerData?.[index].webUrl ?? '')}
>
{/* ...Logging Event Code */}
<BannerElement imageUrl={imageUrl} isLottie={checkIsLottieFileFormat(imageUrl)} />
{/* ...Logging Event Code */}
</SwiperSlide>
))}
<SwiperFraction totalSlides={bannerData?.length ?? 0} />
</Swiper>
css
.container {
position: relative;
width: 100%;
}
.swiperSlide {
position: relative;
cursor: pointer;
}
.swiperSlide .bannerElement {
position: relative;
aspect-ratio: 375 / 138;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%),
lightgray 50% / cover no-repeat;
}
ScreenRecording_01-06-2025.11-50-03_1.mov
Expected Behavior
Swipe only in the swiper container
Actual Behavior
the swiper container swipe doesnt work and the ios tab swipe works
Swiper version
11.2.0
Platform/Target and Browser Versions
ios 18
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