realtorEasier-webSite/mobile/src/components/browse/index.vue

<template>
  <div class="swiper-container" ref="swiper-container">
    <swiper class="swiper-wrapper swiper-wrapper-n" :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="(item,index) in idata" :key="index">
        <div class="s-item" :style="{height:wh.width+'px'}" >
          <div v-if="item.video" class="video-bg">
            <video  controls="controls" playsinline="playsinline" muted="muted" :poster="`${$cdn}images/${floder}/${item.video}.png`" >
              <source :src="`${$cdn}images/${floder}/${item.big}.mp4`" type="video/mp4">
            </video>
          </div>
          <img v-else class="main-img" :src="`${$cdn}images/${floder}/${item.big}.png`">
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

let wh = {
  width: window.innerWidth,
  height: window.innerHeight
}

export default {
  props: ['idata', 'floder', 'mTop'],
  data () {
    return {
      wh,
      swiperOption: {
        slidesPerView: 'auto',
        autoplay: false,
        centeredSlides: true,
        watchSlidesProgress: true,
        pagination: {
          el: '.swiper-pagination'
          // bulletClass: 'my-bullet'
        },
        loop: true,
        paginationClickable: true
      }
    }
  },
  methods: {
    goto (url) {
      window.open(url, '_blank')
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style lang="scss" scoped>
.swiper-wrapper{
  position: relative!important;
}

.swiper-slide {
  width: 100%;
  transform-style: preserve-3d;
}

.swiper-slide {
  .main-img {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
}

.swiper-slide {
  .s-item{
    width: 100%;
    // background: #ebebeb;
  }
}

.swiper-slide{
    width: 100%;
   .s-item{
      width: 100%;
      display: flex;
      align-items: center;
      video,img{
        // position: absolute;
        // transform: translate(-50%,-50%);
        // left: 50%;
        // top: 50%;
        width: 100%;
      }
   }
}

</style>

<style>
.swiper-pagination-bullet-active{
  background: #1fe4dc!important;
}
.video-bg {
  width: 100%;
  height: 100%;
  background: #202020;
  display: flex;
  align-items: center;
}
</style>