vue2.0使用swiper組件實現(xiàn)輪播的示例代碼
更新時間：2018年03月03日 09:07:19 作者：Tony3820
下面小編就為大家分享一篇vue2.0使用swiper組件實現(xiàn)輪播的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、安裝swiper
npm install swiper@3.4.1 --save-dev
2、引用組件
import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';
3、html頁面代碼
<div class="swiper-container" id="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,$index) in detail.imgs">
<a v-on:click="showPreview($index,detail.imgs,swiperObj)">
<figure class="wp-avatar banner">
<img v-cloak :src="item | toQiNiuImg"/>
</figure>
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
4、初始化組件，并設置參數(shù)
setTimeout(function () {
state.swiperObj = new Swiper('#swiper', {
loop: true,
pagination: '.swiper-pagination',
autoplay: 2000,
paginationClickable: true
});
}, 100)
5、搞定，ok
以上這篇vue2.0使用swiper組件實現(xiàn)輪播的示例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進行樣式的改變展示方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
詳解mpvue scroll-view自動回彈bug解決方案
設置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue引入sass并配置全局變量的方法2018-06-06
本篇文章主要介紹了在 React、Vue項目中使用SVG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預覽
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預覽的相關知識,文中的示例代碼講解詳細,需要的可以參考下2025-03-03
Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由
這篇文章主要介紹了Vue使用路由鉤子攔截器beforeEach和afterEach監(jiān)聽路由,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
在項目開發(fā)中,有兩個功能特別類似,如果單獨實現(xiàn),會有很多重復的代碼，這時候就會用到邏輯復用，本文主要介紹了vue3?邏輯復用的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2024-02-02
Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)
這篇文章主要介紹了Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07