プログレスバーでカウントダウンするページネーション
スライダーに利用
npm i --save gsap
./src/components/ProgressPagination.vue
./src/components/ProgressPaginationBullet.vue
をコピペ、スタイルなど適宜調整
<ProgressPagination :items="paginationItems" :change="onChangePagination" />
paginationItems: [
{
duration: 5, // スライドの時間
enter: next => { next(); }, // スライド開始時のcallback, 処理完了後にnextを実行
leave: next => { next(); } // スライド完了時のcallback, 処理完了後にnextを実行
},
{ duration: 4 },
{ duration: 5 }
]
スライド切り替えの処理を行う
/**
* @param nextIndex - 次のスライドのインデックス
* @param prevIndex - 前のスライドのインデックス
* @param next - 処理完了後に実行
*/
onChangePagination(nextIndex, prevIndex, next) {
next();
}
npm run serve
npm run build
npm run lint