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元素。