vue2.0使用swiper組件實現(xiàn)輪播效果
更新時間：2017年11月27日 09:56:23 作者：Tony3820
這篇文章主要為大家詳細介紹了vue2.0使用swiper組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
輕松實現(xiàn)vue2.0輪播效果，供大家參考，具體內(nèi)容如下
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è)置參數(shù)
setTimeout(function () {
state.swiperObj = new Swiper('#swiper', {
loop: true,
pagination: '.swiper-pagination',
autoplay: 2000,
paginationClickable: true
});
}, 100)
5、搞定，ok
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue3中如何使用rem來控制字體大小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯位問題及解決方法
這篇文章主要介紹了VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯位問題及解決方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式
這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽dom節(jié)點寬高變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-cli是一個官方發(fā)布vue.js項目腳手架,使用vue-cli可以快速創(chuàng)建vue項目。本文介紹了vue-cli4.5.x快速搭建項目，感興趣的可以了解一下2021-05-05
這篇文章主要介紹了vue輕量級框架無法獲取到vue對象解決方法相關(guān)知識點，有需要的讀者們跟著學習下。2019-05-05
今天小編就為大家分享一篇vue根據(jù)進入的路由進行原路返回的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?element?el-select下拉滾動加載的方法
很多朋友都遇到這樣一個問題在使用vue+element的el-select下拉框加載返回數(shù)據(jù)太多時，會造成卡頓，用戶體驗欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動加載方法,需要的朋友可以參考下2022-11-11
Vue?Echarts實現(xiàn)多功能圖表繪制的示例詳解
作為前端人員，日常圖表、報表、地圖的接觸可謂相當頻繁，今天小編隆重退出前端框架之VUE結(jié)合百度echart實現(xiàn)中國地圖+各種圖表的展示與使用；作為“你值得擁有”專欄階段性末篇，值得一看2023-02-02