版本
"swiper": "^6.7.0",
"vue": "^3.0.0",
HTML
如果想给两侧的翻页按钮定位到轮播的外面 就把.swiper-container里的position:relative 改成 posotion:initial;让两侧的按钮根据外层容器来定位
<div class="page-content">
<swiper
:slides-per-view="3"
:autoplay="true" navigation
>
<swiper-slide v-for="(item, index) in videoList" :key="index + 1">
<div class="swiper-item">
<div class="top-con">
<img class="top-bg" src="@/assets/image/xuan/top-bg.png">
<img class="suspend-img" src="../../assets/image/xuan/suspend.png">
</div>
<div class="bot-con">
<img class="bot-bg" src="@/assets/image/xuan/bot-bg.png">
<div class="swiper-content">{{item.content}}</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
JS
swiper6所需要的组件都需要单独导入(包括翻页按钮、自动轮播功能等等)
import SwiperCore, { Navigation, Autoplay } from 'swiper'; // 导入需要的组件
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
// 项目用的什么样式就导入对应的样式文件
import 'swiper/swiper.less';
import 'swiper/components/navigation/navigation.less';
SwiperCore.use([ Navigation, Autoplay ])