swiper3d橫向滾動多張炫酷切換banner

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

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

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

 

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

使用npm安裝，請直接去npm裏邊查看  這裏能夠點擊→  https://www.npmjs.com/package/vue-awesome-swiper

個人完成效果：

 

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

上代碼：（博客園很差調整代碼縮進，將就着看哈）

html

1 <div class="successNav">
2   <swiper :options="swipersuccess">
3     <!-- <swiper-slide v-for="(item,index) in indexContentTwo[2].children" :key="index"><img :src="item.picture" alt=""></swiper-slide> -->
4     <swiper-slide><img src="../assets/images/img/banner.png" alt=""></swiper-slide>
5     <swiper-slide><img src="../assets/images/img/group3.png" alt=""></swiper-slide>
6             
7   </swiper>
8</div>

 

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的同樣，能自動滾，也能手機觸摸手滑滾動