swiper3D轮播图专属案例

先安转swiper的各种依赖包：npm install vue-awesome-swiper(如果是vue2请安装4.1.*的版本)，

npm install swiper

 <div class="swiper-container my-swiper">

<div class="swiper-wrapper">

        <div class="swiper-slide" v-for="(column, index) in visibleColumns" :class="[`column${index}`, index === 1 ? 'active' : '']" :key="index">

          <span class="cell"  v-for="(item, index) in column" :class="{ active_cell: getIsCz(item) }" @click="generate(item)" :key="index">

            {{item.label}}

          </span>

        </div>

      </div>

      <div class="swiper-button-prev"> <img class="leftimg" src="../assets/leftjiantou.png" alt="" /></div>

      <div class="swiper-button-next"> <img class="rightimg" src="../assets/rightjiantou.png" alt="" /></div>

</div>

<srcipt>

 mounted() {

    const mySwiper = new Swiper(".swiper-container", {

     // loop: true,

      centeredSlides: true,

      effect: "coverflow",

      freeMode: true,

      slidesPerView: 'auto', // 3 这个是三个轮播切换没三组切换一次

      coverflowEffect: {

        rotate: -20,

        stretch: -100,

        depth: 100,

        modifier: 1,

        slideShadows: true,

      },

      pagination: {

        el: ".swiper-pagination",

        clickable: true,

        //loop: true, // 循环参数

      },

      navigation: {

        nextEl: ".swiper-button-next",

        prevEl: ".swiper-button-prev",

      // loop: true, // 循环参数

      },

    });

  },

</srcipt>