Skip to content

prevent swipe overflow #8048

@WinnieS0728

Description

@WinnieS0728

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:

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions