下载

npm i swiper

使用

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper.min.css";

 <swiper :slides-per-view="2" :space-between="10">
         <swiper-slide>
               
         </swiper-slide>
 </swiper>

Swiper7的API变化

Swiper容器的默认类名变更为'.swiper'，之前是'.swiper-container'。新增两个3D过渡效果，自由模式和网格组件化。

对比

以前

      <swiper :options="swiperOption1" ref="mySwiper">
          <swiper-slide :key="i" v-for="(item, i) in imgList">
            <img :src="item.src" class="swiperImg" />
          </swiper-slide>
        </swiper>
        <div>
          <img
            src="3.png"
            class="swiper-button-next"
            @click="next"
          />
        </div>
        <div>
          <img
            src="4.png"
            class="swiper-button-prev"
            @click="prev"
          />
        </div>

  swiperOption1: {
        slidesPerView: 1,
        spaceBetween: 0,
        loopedSlides: 6,
        centeredSlides: true,
        loop: true,
        effect: "coverflow",
        spaceBetween: "-30%",
        coverflowEffect: {
          rotate: 7,
          stretch: 6,
          depth: 100,
          modifier: 4,
          slideShadows: false,
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },

computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },


    prev() {
      this.swiper.slidePrev();
    },
    next() {
      this.swiper.slideNext();
    },

现在

 <swiper
          :navigation="{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
         }"
          :slides-per-view="1"
          :autoplay="{
          delay: 2000,
          disableOnInteraction: false,
        }"
          :loop="true"
          :loopedSlides="6"
          :space-between="'-30%'"
          effect="coverflow"
          :coverflowEffect="{
            rotate: 7,
            stretch: 6,
            depth: 100,
            modifier: 4,
            slideShadows: false,
          }"
          :centeredSlides="true"
        >
          <swiper-slide v-for="(item, index) in imgList" :key="index">
            <img class="swiperImg" :src="item.src" />
          </swiper-slide>
        </swiper>
        <div>
          <img
            src="3.png"
            class="swiper-button-next"
          />
        </div>
        <div>
          <img
            src="4.png"
            class="swiper-button-prev"
          />
        </div>

import SwiperCore, { Autoplay, EffectCoverflow, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper.scss";
import "swiper/components/navigation";
import "swiper/components/effect-coverflow";
SwiperCore.use([Autoplay,Navigation]);