vue3项目中swiper的使用

1. swiper使用版本

"swiper": "^7.4.1",

2. swiper 引入

/ 引入swiper样式（按需导入）

import "swiper/css";

import "swiper/css/pagination";

// 引入swiper组件

import { Swiper, SwiperSlide } from "swiper/vue";

import { Autoplay, Pagination } from "swiper";

3. 组件间使用

<swiper
            class="swiper"
            ref="swiper11"
            :slides-per-view="6"//展示多少个slides
            :space-between="10"//slides间的间隔
            :observer='true'
			:observeParents="true"
            :centeredSlides="true"
            :loop="true"//是否循环播放
            :modules="modules"//模块配置
            :looped-slides="6"//前后复制的slides数量
            :speed="1000"
            :autoplay="autoConfig.info"
            slidesOffsetBefore="-776"//偏移的距离
            :slideToClickedSlide= "true"//点击slides时候跳转到当前slides
            :pagination="{ clickable: true }"
            @swiper="onSwiper"//初始化slides时候操作
            @slideChange="onSlideChange"//自动播放时候事件改变事件
            @click="onClick"
          >
            <swiper-slide
              v-for="(item, index) in images"
              :key="item.id"
            >
             111
            </swiper-slide>
          </swiper>

4. swiper配置

const modules = [Autoplay, Pagination]; //Autoplay 自动播放  Pagination 分页
//自动轮播配置
const swiperCur = ref(null);
const onSwiper = (swiper) => {
  console.log(swiper);
  swiperCur.value = swiper;//获取到当前的swiper
};
const autoConfig = reactive({
  info: {
    delay: 3000, //间隔时间
    disableOnInteraction: false, //设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
    reverseDirection: false, //是否反方向轮播
    stopOnLastSlide: false, //执行到最后
    pauseOnMouseEnter: true, //鼠标输入时暂停
  },
});
const onSlideChange = (swiper) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  
};