vue中使用swiper輪播圖的正確姿勢(shì)(親測(cè)有效)
前言
網(wǎng)上搜了一大堆在vue中如何使用swiper，結(jié)果搜出來(lái)一堆垃圾，也不知道從哪里復(fù)制的，吐槽完畢。假設(shè)你是個(gè)新手，我從新建項(xiàng)目開始跟你講，以下是步驟。
1.新建vue項(xiàng)目
vue create 項(xiàng)目名
然后選最下面那一個(gè)（鍵盤上下鍵操作）然后回車
選擇Bable，Router，Vuex，Css-Processords四個(gè)，其他的不要選中（空格鍵是選中和取消選中）
剩下的步驟按這張圖來(lái)進(jìn)行選擇，然后項(xiàng)目就創(chuàng)建成功了
2.裝swiper的包
先在命令行cd到項(xiàng)目中
cd 項(xiàng)目名
npm i swiper vue-awesome-swiper
npm i swiper@5
在package.json中查看裝包是否完成
3.使用swiper
1.在components文件夾中新建swiperCom.vue,把下面代碼復(fù)制進(jìn)去,注釋里面有swiper的使用方法。
注意：請(qǐng)確保../assets/img/ 路徑下有swiper1.jpg等照片
<template>
<div id="swipercom">
<div class="swiper-container" id="swiperIndex">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
<img :src="item.pic" alt="">
</div>
</div>
//換頁(yè)器
<div class="swiper-pagination">
</div>
//前進(jìn)后退
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
//滾動(dòng)條
<div class="swiper-scrollbar"></div>
</div>
</div>
</template>
<script>
import 'swiper/css/swiper.css' //引入swiper樣式
import Swiper from 'swiper'; //引入swiper
export default {
name: "Swiper",
data(){
return{
imgs:[
{pic:require('../assets/img/swiper1.jpg')},
{pic:require('../assets/img/swiper2.jpg')},
{pic:require('../assets/img/swiper3.png')}
]
}
},
mounted() {
var mySwiper=new Swiper('#swiperIndex',{
//配置分頁(yè)器內(nèi)容
loop: true, // 循環(huán)模式選項(xiàng)
pagination:{
el:".swiper-pagination",//換頁(yè)器與哪個(gè)標(biāo)簽關(guān)聯(lián)
clickable:true//分頁(yè)器是否可以點(diǎn)擊
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//如果需要滾動(dòng)條
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
}
</script>
<style lang="less">
#swipercom{
width: 7.5rem;
#swiperIndex.swiper-container{
width: 7.1rem;
height: 2.6rem;
border-radius: 0.1rem;
.swiper-slide img{
width: 100%;
}
.swiper-pagination-bullet-active{
background-color: orangered;
}
}
}
</style>
2.然后在項(xiàng)目中找到HomeView.vue（默認(rèn)為主頁(yè)面），把下面代碼復(fù)制，替換掉里面內(nèi)容，里面引入了swiperCom子組件，這也是我們需要用到swiper的子組件
<template>
<div class="home">
<!-- 輪播圖-->
<swiperCom></swiperCom>
</div>
</template>
<script>
import SwiperCom from "@/components/swiperCom";
export default {
name: 'HomeView',
components: {
SwiperCom
}
}
</script>
<style scoped>
</style>
大功告成，效果如下
除此之外要是想要有更多的輪播圖樣式可以去swiper官網(wǎng)進(jìn)行查閱
https://www.swiper.com.cn/usage/index.html
總結(jié)
到此這篇關(guān)于vue中使用swiper輪播圖的正確姿勢(shì)的文章就介紹到這了,更多相關(guān)vue使用swiper輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.nextTick是Vue官方給我們提供的一個(gè)API（方法），作用是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的DOM2021-04-04
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers自定義軌跡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了web前端vue之CSS過(guò)渡效果示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue使用v-if v-show頁(yè)面閃爍,div閃現(xiàn)的解決方法
在頁(yè)面層次結(jié)構(gòu)，數(shù)據(jù)較多的時(shí)候，用v-if或者v-show就會(huì)出現(xiàn)div閃現(xiàn)，或者部分閃爍的結(jié)果。怎么處理這樣的問(wèn)題呢，下面小編給大家?guī)?lái)了vue使用v-if v-show頁(yè)面閃爍,div閃現(xiàn)的解決方法，一起看看吧2018-10-10
Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例
本篇文章主要介紹了Vue-resource實(shí)現(xiàn)ajax請(qǐng)求和跨域請(qǐng)求示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽(tīng)
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽(tīng)事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要介紹了Vue實(shí)現(xiàn)上下層疊輪播圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于Vue中過(guò)濾器的必懂小知識(shí)
vue過(guò)濾器可以在不改變?cè)紨?shù)據(jù)，只是對(duì)數(shù)據(jù)進(jìn)行加工處理后返回過(guò)濾后的數(shù)據(jù)再進(jìn)行調(diào)用處理,下面這篇文章主要給大家介紹了關(guān)于Vue中過(guò)濾器必懂小知識(shí)的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07