在vue3中使用swiper10

一、安装

npm install swiper

二、在vue3中使用

1.引入swiper组件及样式，使用自动轮播功能

<template>
  <div>
	<swiper 
	  :loop="true"
	  :autoplay="{
         delay: 6000,
         disableOnInteraction: false,
         pauseOnMouseEnter: true,
       }"
	  :modules="[Autoplay]"
	>
       <swiper-slide> 1 </swiper-slide>
       <swiper-slide> 2 </swiper-slide>
       <swiper-slide> 3 </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay} from "swiper/modules";
import "swiper/css";
</script>

2.使用分页器Pagination，导航Navigation

1、modules里添加 [ Pagination, Navigation ]
2、script里引入 import { Pagination, Navigation } from “swiper/modules”;
3、swiper组件中配置navigation，pagination对应标签class名字

<template>
  <div>
	<swiper 
	  :loop="true"
	  :autoplay="{
         delay: 6000,
         disableOnInteraction: false,
         pauseOnMouseEnter: true,
       }"
	  :modules="[Autoplay,Pagination,Navigation ]"
	  :navigation="{
         nextEl: '.swiper-button-next',
         prevEl: '.swiper-button-prev',
         hideOnClick: true,
       }"
       :pagination="{
         el: '.swiper-pagination', 
         clickable: true,
       }"
	>
       <swiper-slide> 1 </swiper-slide>
       <swiper-slide> 2 </swiper-slide>
       <swiper-slide> 3 </swiper-slide>

	   <!-- 添加导航按钮 -->
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
    </swiper>

	<!-- 添加分页器，分页器放在了swiper组件外边 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay,Pagination,Navigation  } from "swiper/modules";
import "swiper/css";
</script>

3.监听swiper轮播事件，获取当前index值

1、通过slideChangeTransitionEnd事件监听swiper过度结束

<template>
  <div>
	<swiper 
	  @slideChangeTransitionEnd="onSlideEnd"
	>
       <swiper-slide> 1 </swiper-slide>
       <swiper-slide> 2 </swiper-slide>
       <swiper-slide> 3 </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

const onSlideEnd = (swiper) => {
	//当前index
	console.log(swiper.realIndex)
}
</script>