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