用vue-awsome-swiper做vue的輪播步驟
阿新 • • 發佈:2018-11-03
1、首先進入百度開啟vue-awsome-swiper-npm
2、在小黑窗中敲 npm install vue-awesome-swiper --save
3、將以下程式碼引入到資料夾中的main.js中
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
4、在vue-awsome-swiper-npm首頁中找到SPA模組,複製template標籤裡面的 swiper標籤中的所有東西 ,貼上到你想要輪播的那個頁面(元件)中 。 將不需要的東西刪掉 。
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper>
5、然後在下面script中的export default裡 ,只拿 data裡的東西 (如下所示:)
data() { return { swiperOption: { loop:true, autoplay:{ delay:1000 //一秒切換一次 }, pagination: { el: '.swiper-pagination', } } } }
6、如果你想迴圈播放圖片的話 ,就在上面程式碼塊中 加入 loop:true
設定輪播的時間是 加入 :
autoplay:{
delay:1000 //一秒切換一次
}
7、想要實現輪播圖中的小圓圈(分頁器),加入:
pagination: {
el: '.swiper-pagination',
}
(溫馨提示:想要實現更多的樣式去 Swiper4 頁面上查詢更多精彩內容!)