介绍

vue3中使用swiper可能会出现各种奇奇怪怪的问题,今天使用的时候网上查了一下资料很多人说的办法都不生效,比如说最新版本的swiper把很多方法拆出来单独的模块需要单独引入才可以使用,比如说自动轮播.

正确的使用方式

  <swiper
          :modules="[Navigation,Pagination,Scrollbar,A11y,Autoplay]"
          :spaceBetween="30"
          :autoplay="{delay:3000,disableOnInteraction:false,stopOnLastSlide: false,}"
          :pagination="{ clickable:true}"
      >
        <swiper-slide>
          <img src="https://4m6704.a2cdn1.secureserver.net/wp-content/uploads/2023/08/banner1.png?time=1691835525" alt="">
        </swiper-slide>
        <swiper-slide><img src="https://4m6704.a2cdn1.secureserver.net/wp-content/uploads/2019/09/APU-min.jpg?time=1691835525" alt=""></swiper-slide>
        <swiper-slide><img src="https://4m6704.a2cdn1.secureserver.net/wp-content/uploads/2019/09/Accessories-min-1.jpg?time=1691835525" alt=""></swiper-slide>
        ...
      </swiper>

// 加载要使用的模块,注意最后引入的时候是from 'swiper/modules',这里网上大部分资料是from 'swiper'这样是不对的.而且会报错找不到模块
import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';


import "swiper/css";
import 'swiper/css/navigation';
import 'swiper/css/pagination';