要注意 版本问题
package.js
"swiper": "^6.3.5",
"vue-awesome-swiper": "^3.1.3",
mai.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
vue 文件
<template>
<div class="teacherR">
<swiper :options="swiperOptions">
<swiper-slide v-for="(item, index) in teacherData"
:key="index">
<ul @click="teacherCourseFn(item)">
<p>
<img :src="item.avatar" />
</p>
<div>
<h4>{{ item.realName }}</h4>
<li>{{ item.brief }}</li>
<span @click="teacherCourseFn(item)">查看课程</span>
</div>
</ul></swiper-slide>
</swiper>
</div>
</template>
<script>
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import { teacherApi } from "@/api/study/resources.js";
export default {
data() {
return {
swiperOptions: {
slidesPerView: 4, //显示个数
direction: "horizontal",
loop: true,
autoplay: true,
delay: 300,
},
};
},
methods: {
},
};
</script>
<style scoped lang="less">
@import "/swiper/swiper-bundle.css";
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
// height: 200px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>