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

[Kiyung Kim]

Description

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

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

2024-02-08.11.44.08.mov

+) 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]

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.

[Kiyung Kim]

Hello @malangfox

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