vue使用swiper7

下载

npm i swiper

使用

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

Swiper7的API变化

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

对比

以前

  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();
    },

现在

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]);