其实很简单，只需要为每个轮播图设置不同的class类和不同的options名即可。

1.设置不同的class类和options名

//轮播图1 
// class="swiper-container swiper-pagination1" 
// :options="swiperOptionSwiper1"
<swiper :options="swiperOptionSwiper1" class="swiper-container swiper-pagination1"  ref="mySwiper">
    <swiper-slide v-for="item in carousel">
        <img class="banner-img" :src="item" /> 
     </swiper-slide>
     <div class="swiper-pagination"  slot="pagination"></div>
</swiper>
//轮播图2
//class="swiper"
//:options="swiperOptionSwiper2"
<swiper class="swiper" :options="swiperOptionSwiper2">
  <swiper-slide v-for="item in 10">{{item}}</swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>               

2.为每个不同的options配置不同的内容

           swiperOptionSwiper1: {
                pagination: '.swiper-pagination1',
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: false,
                spaceBetween: 0,
                onSlideChangeEnd: swiper => {
                    this.page = swiper.realIndex+1;
                    this.index = swiper.realIndex;
                },
                autoplay:{
                    delay:2000,
                    disableOnInteraction:false
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                loop:true
            },

//options名为swiperOptionSwiper2的配置
swiperOptionSwiper2: {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    }   
}

实现的效果图：

轮播.gif

因为第二个轮播图是左右滑动，可能会报下面的错：
这是因为封装好的swiper.js文件中有一个默认事件，
e.preventDefault()只要注释掉该事件即可。
————————————————
以上是摘自我的博客，顺便帮我的博客引流，哈哈哈~
原文链接：https://blog.csdn.net/weixin_43332684/article/details/107424702