e.progress

  • Indicates the overall progress of the flicking.
<flicking class="flicking flicking0"
  :options="{
    gap: 10,
    circular: true,
    moveType: { type: 'snap', count: 5 },
  }"
  @move="e => {
    this.$refs.thumb.style.width = (e.progress * 100) + '%';
  }">
  <div class="panel0"></div>
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
  <div class="panel4"></div>
</flicking>

panel.getProgress()

  • Indicates the progress of the relative index of each panel.
<flicking class="flicking flicking1"
  :option="{
    gap: 10,
    circular: true,
    moveType: { type: 'snap', count: 5 },
  }"
  @move="e => {
    e.currentTarget.getAllPanels(true).forEach(panel => {
      panel.getElement().innerHTML = panel.getProgress().toFixed(2);
    });
  }">
  <div class="panel0"></div>
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
  <div class="panel4"></div>
</flicking>

panel.getOutsetProgress()

  • When panel is completely invisible, outsetProgress becomes -1 at left(up), 1 at right(down) direction, and 0 when panel's anchor and hanger is overlapped.
<flicking class="flicking flicking2"
  :options="{
    gap: 10,
    circular: true,
    moveType: { type: 'snap', count: 5 }
  }"
  @move="e => {
    const flicking = e.currentTarget;

    flicking.getAllPanels(true).forEach(panel => {
      panel.getElement().innerHTML = panel.getOutsetProgress().toFixed(2);
    });
  }">
  <div class="panel0"></div>
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
  <div class="panel4"></div>
</flicking>

panel.getVisibleRatio()

  • Indicates the percentage of areas within the viewport that the panel occupies.
<flicking class="flicking flicking3"
  :options="{
    gap: 10,
    circular: true,
    moveType: { type: 'snap', count: 5}
  }"
  @move="e => {
    const flicking = e.currentTarget;

    flicking.getAllPanels(true).forEach(panel => {
      panel.getElement().innerHTML = panel.getVisibleRatio().toFixed(2);
    });
  }">
  <div class="panel0"></div>
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
  <div class="panel4"></div>
</flicking>