vue3.x使用swiper實(shí)現(xiàn)卡片輪播

更新時(shí)間：2022年07月14日 15:51:54 作者：老君-hjs

這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實(shí)現(xiàn)卡片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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?
?? ??? ?}
?? ?}
}

展示效果