利用vue-awesome-swiper实现图片视频混播，话不多说，开干！

第一步：安装

//直接安装版本3即可，自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S

第二步：引入

我是使用内部引入的方式，

 //页面引入swiper
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
<style scoped>
  @import '../../css/swiper.css';
</style>

由于我得项目中缺少一些组件，在<script></script>里面引用
import 'swiper/css/swiper.css'报错，所以我是复制swiper.css到本地，然后在style里面引入的

第三步，页面调用示例 —— 完整代码

 components: {
      swiper,
      swiperSlide
    },

<div>
    <div>
      <swiper
        v-if="bannerList.length>0"
        ref="mySwiper"
        id="mySwiper"
        @slideChange="onSlideChange"
        :options="swiperOption"
        :style="{
        width: '100%',
        margin: '0 auto',
        height: '20rem',
        background: '#fff'
      }"
      >
        <swiper-slide v-for="(item,index) in bannerList" :key="item.id">
          <img
            style="width: 100%;height: 100%"
            :src="item.imgUrl"
            alt=""
            v-if="item.type==1">
          <video
            :src="item.imgUrl"
            ref="video"
            autoplay
            controls
            style="width: 100%;height: 100%;object-fit: fill"
            v-if="item.type==2"/>
        </swiper-slide>
        <!-- Optional controls ,显示小点-->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

data() {
      return {
        bannerList: [
          {
            id: 3,
            type: 2,
            imgUrl: 'http://8.136.101.204/v/饺子运动.mp4',
          },
          {
            id: 1,
            type: 1,
            imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          }, {
            id: 2,
            type: 1,
            imgUrl: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          }
        ],
        swiperOption: {
          direction: 'horizontal',
          // 参数选项,显示小点
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'fraction'//'bullets’ 圆点（默认）‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
          },
          // autoplay: {
          //   delay: 2000,
          //   stopOnLastSlide: false,
          //   disableOnInteraction: false, //操作swiper后不会停止播放
          // },
          loop: false,
          speed: 1000,
          initialSlide: 0,
        },
      };
    },

需要注意的点
1.视频图片混播根据数据类型来判断

 <swiper-slide v-for="(item,index) in bannerList" :key="item.id">
          <img
            style="width: 100%;height: 100%"
            :src="item.imgUrl"
            alt=""
            v-if="item.type==1">
          <video
            :src="item.imgUrl"
            ref="video"
            autoplay
            controls
            style="width: 100%;height: 100%;object-fit: fill"
            v-if="item.type==2"/>
        </swiper-slide>

 bannerList: [
          {
            id: 3,
            type: 2,
            imgUrl: 'http://8.136.101.204/v/饺子运动.mp4',
          },
          {
            id: 1,
            type: 1,
            imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          }, {
            id: 2,
            type: 1,
            imgUrl: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          }
        ],

微信图片_20211024163746.png

然后在<style>标签中修改相应vue-awesome-swiper源码样式；
首先展示下源码默认样式

 pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          },

效果如图所示

微信图片_2.png

微信图片1.png

然后修改小圆点颜色

 #mySwiper >>> .swiper-pagination-bullet-active {
    background: #13d1be;
  }

效果如图所示

微信图片_3.png

如果想换成数字表现形式

  pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'fraction'
          },

#mySwiper >>> .swiper-pagination-fraction {
    background: rgba(0, 0, 0, .5);
    width: fit-content;
    left: 87%;
    padding: 1px 1rem;
    border-radius: 1rem;
    color: white;
    /*line-height: 2rem;*/
    font-size: 12px;
    text-align: center;
  }

效果如图所示

微信图片_4.png

微信图片_5.png

好了，这就是vue-awesome-swiper的简单使用，还有好多方法可以研究以及效果实现
最后附上vue-awesome-swiper源码地址vue-awesome-swiper