Jerky animation when scrolling through slides

[Ibochkarev]

Description

Jerky animation when scrolling through slides in loop mode on a mobile device in the SSR true

Steps to check or reproduce

Nuxt 3.11.2 - ssr:true

"@egjs/flicking-plugins": "4.7.1"
"@egjs/vue3-flicking": "4.11.3"

    <m-slider
      id="w-games-slider"
      circular
      move-type="strict"
      align="center"
      variant-navigation-button="ghost"
      overflow="visible"
    >
      <template #slides>
        <div v-for="(slide, index) in slides" :key="index" :class="slideClasses(index)">
          <div class="w-games-slider__card">
            <picture>
              <source media="(min-width: 1920px)" :srcset="slide.fhd_image" />
              <source media="(min-width: 600px)" :srcset="slide.desktop_image" />
              <img
                class="w-games-slider__card-image"
                :src="slide.mobile_image"
                :alt="slide.title"
                :title="slide.title"
              />
            </picture>
          </div>
        </div>
      </template>
    </m-slider>

3 slides with a fixed width of 276px

We switch to the adaptive mode of the browser at 320px, scroll to the last of the 3 slides - the slide loads and the last active slide is pushed out

Video:

2024-07-03.21.22.23.mov

[malangfox]

Hello @Ibochkarev.

We'd like to check if this is an SSR-specific issue, if it only happens in certain frameworks, or if it happens when the circular option is combined with certain styles.

We are trying to reproduce the issue in its simplest code based on the code you left.
However, can you check if it happens when you don't use SSR or do a similar implementation with the same style in a vanilla framework?

[Ibochkarev]

@malangfox Good afternoon

In SSR:false mode in Nuxt 3 there is no such problem. Only in the SSR:true.