vue3.x使用swiper實(shí)現(xiàn)卡片輪播
本文實(shí)例為大家分享了vue3.x使用swiper實(shí)現(xiàn)卡片輪播的具體代碼,供大家參考,具體內(nèi)容如下
版本號(hào):
vue/cli:4.5.12
swiper:^6.8.4
安裝
npm install --save swiper
使用以及配置
<div class="swiper-container home_swiper"> ?? ?<div class="swiper-wrapper"> ?? ??? ?<div class="swiper-slide" v-for="(item,index) in aImages" :key="index"> ?? ??? ??? ?<img :src="item.picUrl" alt="" /> ?? ??? ?</div> ?? ?</div> </div> import { ?? ?ref, ?? ?nextTick } from 'vue'; import Swiper, { ?? ?Autoplay, ?? ?EffectCoverflow } from "swiper"; Swiper.use([Autoplay, EffectCoverflow]); import "swiper/swiper.scss"; export default { ?? ?setup() { ?? ??? ?const aImages = ref([]); ?? ??? ?const fInitSwiper = () => { ?? ??? ??? ?new Swiper(".home_swiper", { ?? ??? ??? ??? ?//循環(huán) ?? ??? ??? ??? ?loop: true, ?? ??? ??? ??? ?//每張播放時(shí)長3秒,自動(dòng)播放 ?? ??? ??? ??? ?spaceBetween: 16, ?? ??? ??? ??? ?// 切換效果? ?? ??? ??? ??? ?effect: "coverflow", ?? ??? ??? ??? ?// 該選項(xiàng)給Swiper用戶提供小小的貼心應(yīng)用,設(shè)置為true時(shí),鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀,拖動(dòng)時(shí)指針會(huì)變成抓手形狀。 ?? ??? ??? ??? ?grabCursor: true, ?? ??? ??? ??? ?// 設(shè)定為true時(shí),active slide會(huì)居中,而不是默認(rèn)狀態(tài)下的居左。 ?? ??? ??? ??? ?centeredSlides: true, ?? ??? ??? ??? ?// 設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。 ?? ??? ??? ??? ?slidesPerView: 1.32, ?? ??? ??? ??? ?// 啟動(dòng)動(dòng)態(tài)檢查器(OB/觀眾/觀看者),當(dāng)改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時(shí),自動(dòng)初始化swiper。默認(rèn)false,不開啟,可以使用update()方法更新。 ?? ??? ??? ??? ?observer: true, ?? ??? ??? ??? ?observeParents: true, ?? ??? ??? ??? ?observeSlideChildren: true, ?? ??? ??? ??? ?// 自動(dòng)切換 ?? ??? ??? ??? ?autoplay: { ?? ??? ??? ??? ??? ?// 自動(dòng)切換的時(shí)間間隔 ?? ??? ??? ??? ??? ?delay: 3000, ?? ??? ??? ??? ??? ?// 如果設(shè)置為true,當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換 ?? ??? ??? ??? ??? ?stopOnLastSlide: false, ?? ??? ??? ??? ??? ?// 用戶操作swiper之后,是否禁止autoplay。默認(rèn)為true:停止 ?? ??? ??? ??? ??? ?disableOnInteraction: false, ?? ??? ??? ??? ?}, ?? ??? ??? ??? ?// 類似于蘋果將多首歌曲的封面以3D界面的形式顯示出來的方式 ?? ??? ??? ??? ?coverflowEffect: { ?? ??? ??? ??? ??? ?// slide做3d旋轉(zhuǎn)時(shí)Y軸的旋轉(zhuǎn)角度 ?? ??? ??? ??? ??? ?rotate: 0, ?? ??? ??? ??? ??? ?// 每個(gè)slide之間的拉伸值,越大slide靠得越緊。5.3.6 后可使用%百分比 ?? ??? ??? ??? ??? ?stretch: -70, ?? ??? ??? ??? ??? ?// slide的位置深度。值越大z軸距離越遠(yuǎn),看起來越小。 ?? ??? ??? ??? ??? ?depth: 500, ?? ??? ??? ??? ??? ?// depth和rotate和stretch的倍率,相當(dāng)于depth*modifier、rotate*modifier、stretch*modifier,值越大這三個(gè)參數(shù)的效果越明顯。 ?? ??? ??? ??? ??? ?modifier: 1, ?? ??? ??? ??? ??? ?// 是否開啟slide陰影 ?? ??? ??? ??? ??? ?slideShadows: true, ?? ??? ??? ??? ?}, ?? ??? ??? ?}); ?? ??? ?}; ?? ??? ?return { ?? ??? ??? ?aImages? ?? ??? ?} ?? ?} }
展示效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決
Volar 與vetur相同,volar是一個(gè)針對vue的vscode插件,下面這篇文章主要給大家介紹了關(guān)于Vue3格式化Volar報(bào)錯(cuò)的原因分析與解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06vue2+element-ui使用vue-i18n進(jìn)行國際化的多語言/國際化詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于vue2+element-ui使用vue-i18n進(jìn)行國際化的多語言/國際化的相關(guān)資料,I18n是Vue.js的國際化插件,項(xiàng)目里面的中英文等多語言切換會(huì)使用到這個(gè)東西,需要的朋友可以參考下2023-12-12vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0父子傳參,子修改父數(shù)據(jù)的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫設(shè)置樣式不生效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例,幫助大家更好的理解和使用vue插件,感興趣的朋友可以了解下2020-10-10