Infinite flicking

Append & Prepend panel dynamically

  • You can dynamically add panels to the flicking.
  • The panel's indexes are zero-based integer.
  • Note: The number displayed above each panel is not panel's index.
0
1
2
3
4
<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

  • Enabling the infinite option can make needPanel event to be triggered when more panels at moving direction should be fetched within infiniteThreshold value.
0
1
2
3
4
<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

  • You can make continuous carousel UI with asynchronous data by adding placeholder panel first, then update panel with fetched data later.
<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>