1. 安装 swiper
- swiper版本众多,单用其中一个版本就够了,不同的版本有不同的使用方式
npm install swiper@5.4.5
2. 安装 vue-awesome-swiper
- vue-awesome-swiper与swiper配套使用
- vue-awesome-swiper版本我选择的是4.1.1,其他版本可能会有不同的使用方式,不一一列举了
npm i vue-awesome-swiper@4.1.1
4. main.js 中引入
// 如果这里报错,找不到文件,就去node_modules文件夹中查看具体位置在进行引入
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/vue-awesome-swiper'
// css同理
import 'swiper/css/swiper.min.css'
Vue.use(VueAwesomeSwiper)
5.页面中使用
<template>
<div class="banner">
<swiper ref="mySwiper"
style="height:100%;"
:options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
</swiper>
</div>
</template>
<script>
data(){
return {
// 具体他的配置在官网中查看,根据需求配置
// https://www.swiper.com.cn/api/navigation/209.html
swiperOptions: {
slidesPerView: 5,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
}
}
}
}
</script>
<style>
.banner {
width:200px;
height:100px;
}
</style>
至此谢幕,如果帮到你了,就点个赞在走吧, 三Q ~