在vue3.0中使用swiper6

版本

"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 ])