naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.75k stars 128 forks source link

Position Error occured when using bound and custom align props together. #850

Closed yungo1846 closed 4 months ago

yungo1846 commented 7 months ago

Description

Hello I've met error when using bound and custom align props together.

image
import { forwardRef } from "react";

import { Arrow } from "@egjs/flicking-plugins";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";

import "@egjs/flicking-plugins/dist/arrow.css";
import "@egjs/react-flicking/dist/flicking.css";

interface Props {
  children: React.ReactNode;
}

const plugins = [new Arrow({})];

export const Carousel = forwardRef<Flicking, Props>(
  ({ children }: Props, ref) => {
    return (
      <Flicking
        ref={ref}
        bound
        align={{ panel: "120px", camera: "50%" }}
        defaultIndex={0}
        moveType={["snap"]}
        plugins={plugins}
      >
        {children}
        <ViewportSlot>
          <span className="flicking-arrow-prev"></span>
          <span className="flicking-arrow-next"></span>
        </ViewportSlot>
      </Flicking>
    );
  }
);

packages version

"react": "18.2.0",
"react-dom": "18.2.0",
"@egjs/flicking": "4.11.2",
"@egjs/react-flicking": "4.11.2",
"@egjs/flicking-plugins": "4.7.1"

Steps to check or reproduce

🔗 demo link

  1. Click the moveTo button 3times (to move to the first item after reaching the last one)
  2. Drag carousel items
  3. Position error occured

https://github.com/naver/egjs-flicking/assets/59409762/82f9856a-629b-443d-bad3-150ba4b92bdd

+) The moveTo button didn't work as I expected. When I moved the index to 4, I expected item 4 to be in front, but item 3 was in front.

malangfox commented 7 months ago

Hello @yungo1846.

We've released @egjs/flicking 4.11.3-beta.1 and @egjs/react-flicking 4.11.3-beta.1, which fixes this issue. Can you try updating the above packages included in your project to the beta versions and check if this issue is resolved?

We will leave additional comments when we release a patch that fixes this issue.

yungo1846 commented 7 months ago

Hello @malangfox

@egjs/flicking 4.11.3-beta.1 works well. I think the bug is fixed. Thank you :)

malangfox commented 4 months ago

@egjs/flicking 4.11.3 has been released, which fixes this issue.