Vue3-引入Swiper7版本

1. 安装

执行命令：

npm install swiper --save

如果安装依赖需要增加版本号，只需要在其后加 ‘@版本号’

例如：

1. 安装

执行命令：

npm install swiper --save

如果安装依赖需要增加版本号，只需要在其后加 ‘@版本号’

例如：npm install swiper@7.4.1 --save

2. 注入

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
    };
  },

渲染：

      <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="50"
        navigation
        :loop="true"
        :observer="true"
        :observeParents="true"
        :autoplay="{ disableOnInteraction: false, delay: 3000 }"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: true }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>

 最终效果：