欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年07月14日 15:51:54   作者:老君-hjs  
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiper實現(xiàn)卡片輪播,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了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)文章

最新評論