vue3
vue-awesome-swiper vue3
在Vue 3中使用vue-awesome-swiper，首先需要安装swiper和vue-awesome-swiper：
npm install swiper vue-awesome-swiper --save
然后在Vue组件中使用它：
<template>
<swiper :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';
export default {
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptions: {
// 自定义配置
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
};
}
};
</script>
<style>
/* 样式可以根据需要自定义 */
</style>
在这个例子中，我们创建了一个简单的滑块展示，并通过swiperOptions设置了Swiper的配置。Swiper是顶级组件，它包含了所有的滑块和导航元素。每个滑块内容使用SwiperSlide组件包裹。pagination和navigation的CSS类需要对应Swiper的DOM元素。
