Issue with @egjs/vue3-flicking and Grid Layout

[yasserChaib]

Hi everyone,

We’re using the @egjs/vue3-flicking plugin for a Vue 3 project and have encountered an issue when combining it with a grid layout. Specifically, we’re displaying panels in a slider with a display: grid using the CSS property grid-template-columns: repeat(2, 50%);, which arranges the panels in two parallel rows.

The problem occurs when we apply this CSS change to the flicking-camera class. With this style, a large blank space appears at the end of the slider. However, if we remove the display: grid property, the slider works as expected without any issues.

It seems that the issue may be related to the recalculation of the offsetWidth of the camera div, especially when display: grid is used. Additionally, the problem seems to stem from the fact that the camera’s max range is calculated based on the total number of panels or the lastPanel.range.max, ignoring the fact that the panels are spread across two lines. This results in the incorrect calculation of the slider’s width.

We were wondering if anyone could provide guidance on how to fix this issue or properly recalculate the offsetWidth in this scenario.

A live demo for the issue

Has anyone else faced this problem or found a workaround?

Thanks in advance for any help!