web前端學習分享-如何在vue中引入swiper及自動播放功能不能實現(xiàn)的問題

雖然swiper官方網(wǎng)站中的使用文檔中有關于vue如何引入swiper的描述，但是在初次接觸的過程中還是碰到了一些問題，本文將這個過程做個分享記錄，如果大家也碰到和我一樣的問題，可作為參考。

一、安裝swiper、vue-awesome-swiper

查看package.json文件安裝的版本號

二、創(chuàng)建MySwiper.vue組件

第一步：在組件中引入js文件

第二步：在組件中引入css文件

此處注意需要結合自己下載的swiper的版本號按正確的路徑和文件名引入css文件，不同版本有差異，不可照搬

第三步：在export default{}中配置參數(shù)

先注冊組件Swiper和SwiperSlide

在data(){}中配置參數(shù)swiperOption

此處參數(shù)不做說明，官方文檔中有詳細描述，此處實現(xiàn)自動播放功能autoplay 、鼠標拖拽圖片功能

第四步：在組件中的template中進行布局

src屬性中可填入需要展示的圖片

第五步：對需要展示的輪播圖進行樣式設置

這個可根據(jù)需要自定義，此處需要說明的是，如果對pagination小圓點在激活狀態(tài)時的樣式進行設置的話，可通過以下屬性設置，如

自此便可以檢驗效果了，經(jīng)檢驗，圖片可以拖拽切換上一頁下一頁，但是pagination小圓點不顯示，也不自動播放，導致這個問題的原因是swiper 6.X的版本的問題，在原來基礎上面加上以下代碼

此時問題便得到了解決，自動播放功能實現(xiàn)

JavaScript Vue

版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。