Infinite flicking Append & Prepend panel dynamically Prepend Append
<flicking class="flicking flicking0" :options="{ gap: 10 }">
<div v-for="num in list0" class="infinite" :class="`infinite${Math.abs(num) % 5}`" :key="num">
{{ num }}
</div>
</flicking>
<div class="buttons">
<button id="prepend" @click="() => {
const start = list0[0] || 0;
list0.splice(0, 0, ...[start - 2, start - 1]);
}">Prepend</button>
<button id="append" @click="() => {
const end = list0[list0.length - 1] || 0;
list0.push(end + 1, end + 2);
}">Append</button>
</div>
infinite: true & needPanel event <flicking
class="flicking flicking1" :options="{ gap: 10, infinite: true, infiniteThreshold: 50 }"
@need-panel="() => {
const end = list1[list1.length - 1] || 0;
list1.push(end + 1, end + 2);
}">
<div v-for="num in list1" class="infinite" :class="`infinite${Math.abs(num) % 5}`" :key="num">
{{ num }}
</div>
</flicking>
infinite: true & placeholder <flicking
class="flicking flicking2" :options="{ gap: 10, infinite: true, moveType: 'freeScroll' }"
@need-panel="() => {
const end = list2[list2.length - 1] || 0;
list2.push(end + 1, end + 2);
}">
<div v-for="num in list2" class="infinite" :class="`infinite${Math.abs(num) % 5}`" :key="num">
{{ num }}
</div>
</flicking>