下載swiper
首先使用npm 或者cnpm下載swiper
cnpm install swiper
引入swiper
import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';
使用swiper
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="../../static/images/ad1.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad2.jpg" alt=""> </div> <div class="swiper-slide"> <img src="../../static/images/ad3.jpg" alt=""> </div> </div> </div>
mounted里面調用
mounted(){ var mySwiper = new Swiper('.swiper-container', { autoplay:true, loop:true }) },注意
如果想要從后臺請求圖片放上去 new Swiper要寫在網絡請求成功的函數里面，否則不會出來數據。
slider組件的內容如下：
<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- slides --> <swiper-slide v-for="(picitem,index) in items" :key="index"> <img :src="picitem.src" alt=""> </swiper-slide> </swiper></template><script type="text/ecmascript-6"> import {swiper, swiperSlider} from 'vue-awesome-swiper' export default { data() { return { swiperOption: { notNextTick: true, loop: true, autoplay: true, speed: 1000, direction: 'horizontal', grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: '.swiper-pagination', paginationClickable: true, mousewheelControl: true, observeParents: true, debugger: true }, items: [ {src: 'http://localhost/static/images/1.jpg'}, {src: 'http://localhost/static/images/2.jpg'}, {src: 'http://localhost/static/images/3.jpg'}, {src: 'http://localhost/static/images/4.jpg'}, {src: 'http://localhost/static/images/5.jpg'} ], } }, components: { swiper, swiperSlider } }</script><style lang="stylus" rel="sheetstylus"></style>解釋一下：autoplay:true這樣可以解決不自動輪播問題。如果想設置滾動的時間，用speed設置相應時間即可。direction可以設置輪播的方向。具體的參數可參考swiper的官網地址：http://www.swiper.com.cn/api/Effects/2015/0308/193.html
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
