-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
Description
Check that this is really a bug
- I confirm
Reproduction link
https://codesandbox.io/p/sandbox/v34hv4?file=%2Fsrc%2FApp.js%3A12%2C33
Bug description
in common usage, there will be white space before first slide and after last slide.
I want to prevent slide prev when swiper.isBeginning, and prevent slide next when swiper.isEnd.
I'm using currentIndex state to control allowSlidePrev and allowSlideNext.
function App() {
const [index, setIndex] = useState(0);
return (
<Swiper
onSlideChange={(swiper) => {
setIndex(swiper.activeIndex);
}}
allowSlidePrev={index > 0}
allowSlideNext={index < 2}
>
<SwiperSlide
style={{
backgroundColor: "pink",
}}
>
A index:{index}
</SwiperSlide>
<SwiperSlide
style={{
backgroundColor: "cyan",
}}
>
B index:{index}
</SwiperSlide>
<SwiperSlide
style={{
backgroundColor: "skyblue",
}}
>
C index:{index}
</SwiperSlide>
</Swiper>
);
}the prevent effect is worked. but when slide fast, it will breaking layout.
like this:
I think is next transition fired when prev one hasn't finish.
I also try onSlideChangeTransitionEnd. not working either.
maybe we can have props preventSlideOverflow or something like this is swiper's props.
or maybe we can accept swiper argument in allowSlidePrev like onSlideChange did
function App(){
return (
<>
<Swiper preventSlideOverflow={true}>
</Swiper>
// or
<Swiper allowSlidePrev={swiper => !swiper.isBeginning} allowSlideNext={swiper => !swiper.isEnd}>
</Swiper>
</>
)
}Expected Behavior
No response
Actual Behavior
No response
Swiper version
v11.0.5 in my project and v11.2.10 in codesandbox
Platform/Target and Browser Versions
macOS Chrome 138.0.7204.101 (正式版本) (arm64)
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