四月 19, 2019 | 前端與Vue
[Nuxt教學] Vue-carousel完成實用的slideshow!
使用Nuxt&Vue若想快速建立slideshow，可參考本文介紹的第三方套件vue-carousel，slideshow通常在網頁中都會使用到，為此也能做成Component，如此一來其他專案有符合需求的也可重複使用。
這次要介紹的Vue-carousel是屬於現成的Vue第三方套件，內建了一些常用的功能，若slideshow開發上沒有太特殊的使用需求，也推薦閱讀的您一同探索該套件的好用之處，接下來開始Vue-carousel的安裝與基礎設定吧!
Step.1 安裝 Vue-carousel
npm install vue vue-template-compiler @chenfengyuan/vue-carousel
Step.2 於plugins新增vue-carousel.js
import Vue from 'vue';
import VueCarousel from '@chenfengyuan/vue-carousel';
Vue.use(VueCarousel);
Step.3 Nuxt.config.js 設定 Plugins
plugins: [
{
src:'~/plugins/vue-carousel.js',
}
],
Step.4 製作成 slider components
vue-carousel樣式可參考官網
Step.5 參數設定
此套件提供許多參數可供設定，例如:
1.輪撥時設定方向(上下左右)
2.到下個幻燈片前延遲秒數
3.自動撥放
4.Hover時跳出頁面切換按鈕
細部參數設定可參考下方所示官方定義。
Step.6 開始使用components
可在layout或pages依照個人需求使用slider components
加入一些美麗圖片來看看實際的成果吧!
Step.7 注意事項
新手在使用方便的套件時，應注意對瀏覽器的支援性，免得花時間研究酷炫套件結果無法在特定瀏覽器使用。
官方有提供瀏覽器支援性，在此順便附上:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Opera (latest)
- Edge (latest)
- Internet Explorer 9+
結論
若未來想從事前端工程師相關職務，在開發上一定會碰到手刻或者使用現成套件，其實這個議題沒有標準答驗，一切依照專案需求決定即可，作者在近期開發的專案中使用到此套件覺得非常方便，如果你也是Vue的愛好者，歡迎來體驗Vue-carousel的箇中奧妙。
