移动轮播图片+视频（nuxt+vue-awesome-swiper）

移动轮播图片+视频（nuxt+vue-awesome-swiper）

1.安装vue-awesome-swiper

2.html

<section class="banner">
	<swiper :options="swiperOption" ref="videoSwiper" v-if="initOrNot">
	 <swiper-slide v-for="( item , index ) in BannersCn" :key="index">
	    <div class="videoDiv" v-if="item.type == 'mp4' && BannersCn && BannersCn.length > 0" @click="showPlayer"> 
	      <video v-if="videoShow" :ref="'videoPlayer' + index" 
	      :src="item.image" 
	      webkit-playsinline="true"
	      playsinline="true"
	      x-webkit-airplay="true"
	      x5-video-player-type="h5"
	      x5-video-player-fullscreen="true"
	      x5-video-orientation="portraint"
	      style="object-fit:fill"
	      preload="auto"
	      muted="true"
	      class="multimedia"  
	      poster="index/video-bg.jpg">
	      </video>
	      <img v-else src="index/video-bg.jpg" class="multimedia" style="width:100%;height: 100%;"/>
	      <div  class="video_btn" >
	        <i v-show="isPlay && item.type== 'mp4'" class="play-btn el-icon-video-pause" @click="pauseVideo"></i>
	        <i v-show="isPause  && item.type== 'mp4'" class="play-btn el-icon-video-play" @click="playVideo"></i>
	      </div>
	    </div>
	    <div v-else>
	      <nuxt-link v-if="item.addres"  :to="item.addres || ''">
	        <img :src="item.image" class="multimedia" >
	      </nuxt-link>
	      <img v-else :src="item.image" class="multimedia" >
	    </div>
	  </swiper-slide>
	  <div class="swiper-pagination" v-for="( item , index ) in BannersCn" :key="index" slot="pagination"></div>
	</swiper>
</section>

3.data

data(){
   
	return{
   
		BannersCn:[
        {
   
          image: "https://cloud.video.taobao.com//play/u/2200750399716/p/1/e/6/t/1/293471851253.mp4",
          title: "",
          // addres: {
   
          //   path: '/zhuanti/guanaiyisheng'
          // },
          type:'mp4'
        },
        {
   
          image: "/new-index/b1-cn.jpg",
          title: "",
          addres: {
   
            path: '/zhuanti/guanaiyisheng'
          },
          type:'jpg'
        },
        {
   
          image: "/new-index/b2-cn.jpg",
          title: "",
          addres: {
   
            path: '/zhuanti/zhaixingqiyuan'
          },
          type:'jpg'