一、 swiper簡介
官方網址: https://www.swiper.com.cn/
Swiper是一個開源,免費,強大的觸控滑動插件
多用於網站輪播圖效果實現
實現案例演示:
可以實現功能:
1. 左右切換按鈕點擊切換banner圖
2. 下方分頁器也可實現點擊切換banner圖效果
3. 還可以通過設置屬性的方式實現一些輪播的效果(例如:設置autoplay屬性,即可讓banner圖自動輪播.設置loop屬性,讓輪播圖輪播是否為循環輪播.)
二、 在vue中swiper的使用方式
1. 安裝swiper
在項目運行的控制臺輸入: npm install swiper vue-awesome-swiper –save進行安裝
在vue中使用swiper插件，由於vue-awesome-swiper插件包的版本問題，會出現左右箭頭點擊失效以及自動播放失效的情況。
所以在安裝完之後,還需要安裝另一個版本的swiper
在項目運行的控制臺輸入: npm install vue-awesome-swiper@3.1.3 –save
到這裡,我們的安裝就已經完成了.
2. 在vue中引用
在main.js文件中,輸入:
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
3. 在頁面文件中templete標籤中編寫swiper部分代碼
其中內聯style樣式可不寫,根據項目需求進行改寫.
<swiper :options="swiperOption" ref="mySwiper" style="min-width:1200px">
<swiper-slide v-for="(banner,index) in bannerList" :key="index" style="position:relative;overflow:hidden;width:100%;height:500px;">
<img :src="banner.img" style="position:absolute;top:0;left:50%;width:1920px;height:500px;margin-left:-960px;" />
</swiper-slide>
<!-- 分頁器 -->
<div slot="pagination"></div>
<!-- 左右箭頭 -->
<!-- @click="prev" -->
<div slot="button-prev"></div>
<!-- @click="next" -->
<div slot="button-next"></div>
</swiper>
4. 在script標籤中編寫代碼
export default {
components: {},
props: {},
data() {
return {
swiperOption: {
loop: true, //是否循環輪播
speed: 1000, //切換速度
observer: true, //修改swiper自己或子元素時，自動初始化swiper
observeParents: true, //修改swiper的父元素時，自動初始化swiper
//自動輪播
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
//設置slider容器能夠同時顯示的slides數量
slidesPerView: 1,
//左右切換
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//分頁器
pagination: {
el: ".swiper-pagination",
clickable: true, // 允許點擊小圓點跳轉
},
//設置輪播樣式,此處為3d輪播效果
effect: "coverflow",
coverflowEffect: {
rotate: 30, // 旋轉的角度
stretch: 10, // 拉伸 圖片間左右的間距和密集度
depth: 60, // 深度 切換圖片間上下的間距和密集度
modifier: 2, // 修正值 該值越大前面的效果越明顯
slideShadows: true, // 頁面陰影效果
},
},
bannerList: [
{
img: "http://www.lemoncome.com/static/img/banner01.png",
},
{
img: "http://www.lemoncome.com/static/img/banner02.png",
},
{
img: "http://www.lemoncome.com/static/img/企業徵信服務.png",
},
],
};
},
到這裡,vue使用swiper實現輪播圖就完成了!