Bound option stops at random

[LeBlank0]

Description

I'm having an issue with the 'bound' option, it seems like it doesn't know when the end, it stops at random place each time I reload my page and cache. I've tried removing my css and some option but I cannot get ride of this behavior if I want to use 'bound'.

Steps to check or reproduce

Just create a Flicking element like this with images inside. I'm using Vue3 and Typescript with Vite. Here is the live website to see the problem https://www.imagelabs.net/.

HTML

<div class="container-2 no-smoke passthrough-cursor">
    <Flicking ref="flicking" style="overflow: visible;" :options="{
        inputType: ['touch', 'mouse', 'pointer' ], defaultIndex: 0,
        align: 'prev', bound: true, circular: false, duration: 400 }" @reachEdge="onReachEdge" @move="onMove">
      <div class="flicking-panel slider-item big-cursor">
        <h4>peoples</h4>
        <img src="/assets/peoples.jpg" alt="Peoples">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>landscapes</h4>
        <img src="/assets/landscapes.jpg" alt="Lanscapes">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>vehicles</h4>
        <img src="/assets/vehicles.jpg" alt="Vehicles">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>animals</h4>
        <img src="/assets/animals.jpg" alt="Animals">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>plants</h4>
        <img src="/assets/plants.jpg" alt="Plants">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>objects</h4>
        <img src="/assets/objects.jpg" alt="Objects">
      </div>
      <div class="flicking-panel slider-item big-cursor">
        <h4>buildings</h4>
        <img src="/assets/buildings.jpg" alt="Buildings">
      </div>
    </Flicking>
  </div>

CSS

.container-2 {
  width: 100%;
  padding: 0 var(--border-padding);

  .slider-item {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 85%;
    padding: 0 2rem;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    h4 {
      margin-bottom: 2rem;
    }

    img {
      object-fit: cover;
      height: 100%;
      max-height: 500px;
      aspect-ratio: 1 / 1.2;
      border-radius: 4px;
      -webkit-user-drag: none;
    }
  }
}

JS (removing it doesn't change a thing)

const onReachEdge = (e: any) => {
  edge.value = e.direction === 'PREV' ? 'start' : 'end';
};

const onMove = () => {
  if (flicking.value?.camera.atEdge === false) {
    edge.value = 'none';
  }
};

Thanks already for any help you could provide <3