安装命令
vue
npm install swiper@5.2.0 --save-dev
npm install vue-awesome-swiper@4 --save-dev`
html
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in listImg" :key="index">
<img :src="item" />
</swiper-slide>
</swiper>
<script>
import { getTeacher, getCourse, getBasics, getCImage } from "@/api/home.js";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
// 自动播放
autoplay: true,
// 切换速度
speed: 300,
// 无限循环
loop: true,
slidesPerView: "auto",
loopedSlides: 5,
// loopAdditionalSlides: 3,
// 一列显示几行
slidesPerView: 3,
grid: {
fill: "column",
rows: 1,
},
},
</script>
|
