vue3中swiper11的使用

Swiper官网
vue中使用方法

我使用的是 “vue”: “3.5.11”，swiper版本为 “swiper”: “11.1.14”， “less”: “4.2.0”

1. 属性介绍

属性名	作用
slidesPerView	设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（小数不可loop），或者 'auto’则自动根据slides的宽度来设定数量。
autoplay	autoplay:{ delay: 2000 ,disableOnInteraction: false }；❤️autoplay为自动切换函数；❤️ delay：轮播项的延迟时间；❤️ disableOnInteraction：用户操作之后时候禁止自动切换。
navigation	使用前进后退按钮来控制Swiper切换。
pagination	pagination=“{ type: ‘bullets’, clickable: true }” ；❤️pagination：使用分页器导航；❤️type：分页器样式；❤️clickable是否可点击跳转到对应图片。
pagination	scrollbar=“{ draggable: true }” ❤️scrollbar：设置滚动条，❤️draggable：该参数设置为true时允许拖动滚动条
direction	Swiper的滑动方向，可设置为水平方向切换 horizontal / 垂直方向切换 vertical
space-between	在slide之间设置距离（单位px）
modules	在项目中引入swiper 时，需要用到的 Swiper 模块

2. 方法介绍

事件	作用
@swiper	事件函数，返回swiper实例
@slideChange	事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点

3. 代码示例

<template>
  <div class="swiper">
    <swiper
      :slidesPerView="1"
      :autoplay="{ delay: 2000, disableOnInteraction: true }"
      :navigation="true"
      :pagination="{ type: 'bullets', clickable: true }"
      :scrollbar="{ draggable: false }"
      :space-between="0"
      :modules="modules"
      @mouseenter="enter"
      @mouseleave="leave"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in props?.swiperImgArray" :key="index" class="swiperItem">
        <img :src="item.img" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts" name="AutoSwiper">
	import { toRaw } from "vue"
	import { Swiper, SwiperSlide } from "swiper/vue"
	import "swiper/css"
	import "swiper/less/navigation"
	import "swiper/less/pagination"
	import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper/modules"
	interface Item {
	  img: string
	}
	const props = defineProps<{ swiperImgArray: Item[] }>()
	
	let modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y]
	//定义swiperNew,目的获取非响应式swiper
	let swiperNew: any
	
	//鼠标移入
	const enter = () => {
	  swiperNew.autoplay.stop()
	}
	//鼠标移出
	const leave = () => {
	  swiperNew.autoplay.start()
	}
	const onSwiper = (swiper: any) => {
	  // console.log(swiper);
	
	  swiperNew = toRaw(swiper) //拿到swiper对象再转换为非响应式
	}
	const onSlideChange = () => {
	  // console.log("slide change");
	}
</script>

<style lang="less" scoped>
	.swiper {
	  width: 100%;
	  height: 100%;
	  img {
	    width: 100%; 
	    height: 100%;
	  }
	
	  .swiperItem {
	    // border: aqua solid 1px;
	    // height: 200px;
	  }
	}
	
	:deep(.swiper-pagination) .swiper-pagination-bullet.swiper-pagination-bullet-active {
	  background-color: rgb(229, 127, 141);
	}
	
	:deep(.swiper-pagination-bullet) {
	  //修改分页器圆点大小
	  width: 8px;
	  height: 8px;
	  background-color: #fff;
	}
	
	.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
	:deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
	  // 分页器远点之间的距离
	  margin: 0 10px;
	}
	
	:deep(.swiper-button-prev),
	:deep(.swiper-button-next) {
	  color: rgb(229, 127, 141);
	}
</style>

swiper