最近一直在弄轮播图，然后使用的是swiper v9版本，主要是两个使用场景
1.纯 vue环境

<template>
  <div class="course-list-wrapper" id="course-list">
    <div class="course-list-box" id="gpk">
      <div class="container">
        <p class="category-title">General Publishing Knowledge</p>
        <div class="swiper-button-box">
          <div class="swiper-c1-next-button">
            <img src="~/assets/img/arrow_right_alt.svg" class="abs-center" alt="">
          </div>
          <div class="swiper-c1-pre-button">
            <img src="~/assets/img/arrow_left_alt.svg" class="abs-center" alt="">
          </div>
        </div>
      </div>

        <div class="swiper" :style="widthChange">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-color: #00ABCF;">Slide 1</div>
                <div class="swiper-slide" style="background-color: #1BDFB1;">Slide 2</div>
                <div class="swiper-slide" style="background-color: #2d8cf0;">Slide 3</div>
                <div class="swiper-slide" style="background-color: #3B2F40;">Slide 4</div>
                <div class="swiper-slide" style="background-color: #8E9192;">Slide 5</div>
                <div class="swiper-slide" style="background-color: #337AB7;">Slide 6</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper, { Navigation } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default {
  name: 'index',
  components: {Button},
  data(){
    return {
      banner:{},
      gpkList:[],
      faList:[],
      frList:[],
      resourceUrl: '',
      respWidth: 1410,
      widthChange: '' //这个主要是为了计算 轮播区域的左侧margin的
    }
  },
    created() {
      //本来是在 nuxt3下使用的，但是下面这个方式 和纯vue环境 是一样的，完全按照官方文档来调用的
      if (process.client){
          const swiper = new Swiper('.swiper', {//实例化一个 Swiper对象，然后初始化,传递需要的配置参数
              direction: 'horizontal',
              freeMode: true,
              loop: false,
              slidesPerView: 4.03,
              spaceBetween: 10,
              modules: [Navigation],
              navigation: {
                  nextEl: '.swiper-c1-next-button',
                  prevEl: '.swiper-c1-pre-button',
              },
              breakpoints: {
                  576: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  },
                  640: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  },
                  768: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  },
                  992: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  },
                  1200: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  },
                  1410: {
                      slidesPerView: 4.01,
                      spaceBetween: 30
                  }
              }
          });

          let that = this
          swiper.on('slideChange', function (swiper) {
              if (swiper.activeIndex !== 0 ){
                  that.widthChange = 'margin-left:0px';
              }else {
                  that.widthChange = 'margin-left: calc((100% - '+that.respWidth+'px)/2)';
              }
          }.bind(that));

          swiper.on('breakpoint', function (swiper, breakpointParams) {
              that.respWidth = swiper.currentBreakpoint
              this.widthChange = 'margin-left: calc((100% - '+this.respWidth+'px)/2)'
          }.bind(that));
      }

      this.widthChange = 'margin-left: calc((100% - '+this.respWidth+'px)/2)'
  },
  methods: {
  }
}

</script>

2.nuxt3框架下使用，主要是通过 Swiper 和 SwiperSlide 组件实现

<template>
  <!--  home-page-banner-->
  <div class="banner-wrapper" v-if="banner.coverPicture">
    <div class="video-box" v-if="banner.playUrl">
      <Video class="video-player" :src="`${resourceUrl+'/'+banner.playUrl}`" type="video/mp4" autoplay="autoplay" loop="loop" muted="muted"></Video>
    </div>
    <div class="container banner-course-wrapper">
      <div class="banner-course-box">
        <p class="title">{{banner.title}}</p>
        <p class="desc">
          {{banner.description}}
        </p>
      </div>
    </div>
  </div>

  <div class="course-list-wrapper" id="course-list">
    <div class="course-list-box" id="gpk">
      <div class="container">
        <p class="category-title">General Publishing Knowledge</p>
        <div class="swiper-button-box">
          <div class="swiper-c1-next-button">
            <img src="~/assets/img/arrow_right_alt.svg" class="abs-center" alt="">
          </div>
          <div class="swiper-c1-pre-button">
            <img src="~/assets/img/arrow_left_alt.svg" class="abs-center" alt="">
          </div>
        </div>
      </div>

      <div class="swiper-container-wrapper" v-if="gpkList.length > 0">
        <swiper :sticky="true" :slides-per-view="4.03" :centeredSlides="true" :initialSlide="1" :space-between="30" :loop="false" :enabled="gpkList.length > 3" :modules="modules" :navigation="{prevEl: '.swiper-c1-pre-button', nextEl: '.swiper-c1-next-button'}" @slideChange="slideGpkChange">
          <swiper-slide v-for="(item, index) in gpkList" :class="{'sp-img': gpkList.length < 2}">
            <NuxtLink :to="`${'/course/'+item.id}`">
              <img :src="`${resourceUrl+'/'+item.coverPicture}`" alt="">
              <p class="title">{{item.title}}</p>
              <div class="statistics">
                <p class="time">{{item.estimatedLearningTime}}</p>
                <p class="certification" v-if="item.needCertification">certification</p>
              </div>
            </NuxtLink>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="course-list-box" id="fa">
      <div class="container">
        <p class="category-title">For Authors</p>
        <div class="swiper-button-box">
          <div class="swiper-c2-next-button">
            <img src="~/assets/img/arrow_right_alt.svg" class="abs-center" alt="">
          </div>
          <div class="swiper-c2-pre-button">
            <img src="~/assets/img/arrow_left_alt.svg" class="abs-center" alt="">
          </div>
        </div>
      </div>

      <div class="swiper-container-wrapper" v-if="faList.length > 0">
        <swiper :sticky="true" :slides-per-view="4.03" :centeredSlides="true" :initialSlide="1" :space-between="30" :loop="false" :enabled="faList.length > 3" :modules="modules" :navigation="{prevEl: '.swiper-c2-pre-button', nextEl: '.swiper-c2-next-button'}" @slideChange="slideFaChange">
          <swiper-slide v-for="(item, index) in faList" :class="{'sp-img': faList.length < 2}">
            <NuxtLink :to="`${'/course/'+item.id}`">
              <img :src="`${resourceUrl+'/'+item.coverPicture}`" alt="">
              <p class="title">{{item.title}}</p>
              <div class="statistics">
                <p class="time">{{item.estimatedLearningTime}}</p>
                <p class="certification" v-if="item.needCertification">certification</p>
              </div>
            </NuxtLink>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="course-list-box" id="fr">
      <div class="container">
        <p class="category-title">For Reviewers</p>
        <div class="swiper-button-box">
          <div class="swiper-c3-next-button">
            <img src="~/assets/img/arrow_right_alt.svg" class="abs-center" alt="">
          </div>
          <div class="swiper-c3-pre-button">
            <img src="~/assets/img/arrow_left_alt.svg" class="abs-center" alt="">
          </div>
        </div>
      </div>

      <div class="swiper-container-wrapper" v-if="frList.length > 0">
        <swiper :sticky="true" :slidesPerView="4.03" :centeredSlides="true" :initialSlide="1" :spaceBetween="30" :loop="false" :enabled="frList.length > 3" :modules="modules" :navigation="{prevEl: '.swiper-c3-pre-button', nextEl: '.swiper-c3-next-button'}" @slideChange="slideFrChange">
          <swiper-slide v-for="(item, index) in frList" :class="{'sp-img': frList.length < 2}">
            <NuxtLink :to="`${'/course/'+item.id}`">
              <img :src="`${resourceUrl+'/'+item.coverPicture}`" alt="">
              <p class="title">{{item.title}}</p>
              <div class="statistics">
                <p class="time">{{item.estimatedLearningTime}}</p>
                <p class="certification" v-if="item.needCertification">certification</p>
              </div>
            </NuxtLink>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Navigation, FreeMode } from 'swiper';
const modules = [Navigation, FreeMode];
const config = useRuntimeConfig()
const resourceUrl = config.public.envData.VITE_APP_URL
</script>

<script>
import {Button} from "@qinghong-ui/design-system"
import { Swiper, SwiperSlide } from 'swiper/vue';
export default {
  name: 'index',
  components: {Button,Swiper,SwiperSlide},
  data(){
    return {
      banner:{},
      gpkList:[],
      faList:[],
      frList:[],
      resourceUrl: ''
    }
  },
  created() {
    this.getResourceList()
  },
  methods: {
    getResourceList: async function () {
      const res = await $fetch('/api/index/resource', {
        method: 'get',
        headers: {'X-Requested-With': 'XMLHttpRequest'}
      })

      if (res){
        if (res.code){
          this.$toast.error(res.msg)
        }else {
          this.banner = res.data.banner
          this.gpkList = res.data.gpk
          this.faList = res.data.fa
          this.frList = res.data.fr
        }
      }else {
        this.$toast.error('require api failed')
      }
    },
    slideGpkChange: function (swiper){
      this.slideChange(swiper, 'gpk')
    },
    slideFaChange: function (swiper){
      this.slideChange(swiper, 'fa')
    },
    slideFrChange: function (swiper){
      this.slideChange(swiper, 'fr')
    },
    slideChange: function (swiper, type){
      let num = 0;
      if (type === 'gpk'){
        num = this.gpkList.length;
      }else if (type === 'fa'){
        num = this.faList.length;
      }else {
        num = this.frList.length;
      }

      if (num > 1){
        if (num === 2 ){
          if (swiper.activeIndex === 0 ){
            swiper.slideTo(1);
          }
        }

        if (num === 3){
          if (swiper.activeIndex === 0 ){
            swiper.slideTo(1);
          }else if (swiper.activeIndex === 2){
            swiper.slideTo(1);
          }
        }

        if (num > 3){
          if (swiper.activeIndex === 0 ){
            swiper.slideTo(1);
          }else if (swiper.activeIndex === (num - 1)){
            swiper.slideTo(num - 2);
          }
        }
      }
    }
  }
}
</script>