swiper(3d切换)

npm（用的版本3）

npm install vue-awesome-swiper@3 --save-dev

效果图

html

<swiper class="swiper-wrap" :options="swiperOptions">    <swiper-slide class="swiper-item item1">Slide 1</swiper-slide>
    <swiper-slide class="swiper-item item2">Slide 2</swiper-slide>
    <swiper-slide class="swiper-item item3">Slide 3</swiper-slide>
    <swiper-slide class="swiper-item item4">Slide 4</swiper-slide>
    <swiper-slide class="swiper-item item5">Slide 5</swiper-slide>
</swiper>  

js

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, //手动切换后，任自动切换
        },
        loop: true,
        effect: 'coverflow',
        centeredSlides: true, // 居中
        slidesPerView: 2, // 每边可见swiper-slide的个数
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 500,
          modifier: 1,
          slideShadows: true,
        },
        on: {
          slideChange: function () {
            console.log('当前选中项为：' + this.realIndex)
          },
        },
        // Some Swiper option/callback...
      },
    }
  },
}

css

.swiper-wrap {  width: 100vw;  height: 20vh;
}
.item1 {
  background-color: blue;
}
.item2 {
  background-color: rgb(255, 72, 0);
}
.item3 {
  background-color: rgb(9, 255, 0);
}
.item4 {
  background-color: rgb(0, 255, 242);
}
.item5 {
  background-color: rgb(255, 0, 234);
}