e.progress
<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()
<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()
<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()
<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>