splide icon indicating copy to clipboard operation
splide copied to clipboard

Splide React will break down by wheel after change viewport when set breakpoints

Open jkiss opened this issue 1 year ago • 0 comments

Checks

  • [X] Not a duplicate.
  • [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

@splidejs/react-splide v0.7.12

Description

I have config like below, splide will break down after change viewport and wheel.

<Splide
    aria-label="characters"
    hasTrack={false}
    options={{
        // gap: "1rem",
        type: "loop",
        perPage: 3,
        focus: "center",
        padding: "15%",
        waitForTransition: true,
        wheel: true,
        speed: 1000,
        updateOnMove: true,
        arrows: true,
        pagination: false,
        breakpoints: {
            1400: {
                perPage: 2,
                padding: "22%",
            },
            1200: {
                perPage: 2,
                padding: "12%",
            }
        },
    }}
    onMove={(splide, index, prev, dest) => {
          setPinsRotateAngel(-Pins.angle_unit * index)
          setCurrIndex(index + 1)
    }} 
>
    <SplideTrack>
        {Array.from(Array(total)).map((e, i) => (
            <SplideSlide key={`slide-${i}`}>
                <h1>slide {i}</h1>
            </SplideSlide>
        ))}
    </SplideTrack>
</Splide>

Reproduction Link

No response

Steps to Reproduce

  1. create splide react component, must write onMove event and include a setState function:
  2. open broswer, making it's width bigger than 1400
  3. change broswer width smaller than 1200
  4. wheel your mouse
  5. break down...

Expected Behaviour

splide runs normally

jkiss avatar May 24 '23 06:05 jkiss