最近有了個新需求，swiper3d橫向滾動多張炫酷切換banner要和elementUI里邊走馬燈的卡片化card 類似，但是還需要h5手機觸摸滾動啊啊啊啊，昨天折騰了半個早上總算完成，今天乖乖跑來mark一下。一眨眼過了一個月，9月這段期間項目多，還帶著小徒弟做項目，一邊教還要一邊趕進度。真的是超級無敵累，不過看著他慢慢有所成長也是有點欣慰的。終歸還是自己懶，放草稿箱里的文章總結就一直放著了沒繼續著重去寫。

最近這段時間主要做h5頁面，對接公眾號。用的是vue來寫的h5項目頁面，這個項目其實是小徒弟做的……然而加了一堆的亂七八糟的插件的方法，現在還得重新梳理。不然被老大發現的話會死得很慘。

其中有一個需求是要求像elementUI里邊走馬燈的卡片化card，如下：

但是除了需要這種3d效果之外，還需要h5手機端手動滑動，element是不支持的。當然我只是舉個栗子，我的項目是要剔除了element直接用vux的。加上項目里邊，有橫向自動滾動相冊、多個banner圖。所以我這塊才把目光放到swiper

我的完成效果：

當然有人喜歡把下邊的黑色陰影用分頁器加上box shadow 四周陰影呈現出來，我這塊是用了一張陰影圖，沒有使用到分頁器。而且自動滾的3d效果確實比element 走馬燈card還要炫酷，我這里用的是swiper3。

上代碼：(博客園不好調整代碼縮進，將就著看哈

1

2

3

4

5

6

7

8

data數

data(){

return{

swipersuccess:{

effect:"coverflow",

grabCursor: true,

watchSlidesProgress: true,

centeredSlides: true,

loop: true,

loopedSlides: 3,

slidesPerView: 3,

autoplay: {

delay: 3000,//自動播放速度

disableOnInteraction: false//鼠標移上去時是否還繼續播放

},

coverflowEffect: {

// rotate: 50,

// stretch: 0,

// depth: 500,

// modifier: 1,

// slideShadows : true

rotate: 30,

stretch: 0,

depth: 60,

modifier: 6,

slideShadows : false

},

},

}

生命周期

computed: {

swiper() {

return this.$refs.mySwiper.swiper;

}

},

css(根據業務需求自行改動

.successNav .swiper-slide.swiper-slide-active img {

transform: scaleX(1.6);

border-radius: 5px;

}

.successNav .swiper-slide.swiper-slide-duplicate-prev img,

.successNav .swiper-slide.swiper-slide-next img,

.successNav .swiper-container-3d .swiper-slide-shadow-right,

.successNav .swiper-container-3d .swiper-slide-shadow-left,

.successNav .swiper-slide.swiper-slide-prev img,

.successNav .swiper-slide.swiper-slide-prev{

border-radius: 5px !important;

如果不是使用vue的小伙伴也別著急，還是有案例可以直接用js+html的

這里好像插入不了壓縮包誒，有需要的小伙伴可以留郵箱發哈，有swiper4和swiper3兩個版本的html+js的寫法。和前面適用vue的一樣，能自動滾，也能手機觸摸手滑滾動

總結

以上是生活随笔為你收集整理的swiper炫酷_swiper3d横向滚动多张炫酷切换banner的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。