zhongderengongzhineng/src/plugin/v-swiper.vue

<template>
  <div class="v-swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) in imgs" :key="index" class="swiper-con">
        <img class="imgSty" :src="item">
      </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'

export default {
  data () {
    return {
      imgs: [
        'http://video.cgaii.com/images/slider_img/slider_1.jpg',
        'http://video.cgaii.com/images/slider_img/slider_2.jpg',
        'http://video.cgaii.com/images/slider_img/slider_3.jpg',
        'http://video.cgaii.com/images/slider_img/slider_4.jpg',
        'http://video.cgaii.com/images/slider_img/slider_5.jpg',
        'http://video.cgaii.com/images/slider_img/slider_6.jpg',
        'http://video.cgaii.com/images/slider_img/slider_7.jpg',
        'http://video.cgaii.com/images/slider_img/slider_8.jpg'
      ],

      swiperOption: {
        // effect:'cube',
        loop: true,
        speed: 2000,
        autoplay: {
          delay: 0,
          disableOnInteraction: false
        },
        slidesPerView: 8,
        spaceBetween: 15,
        pagination: {
          el: '.swiper-pagination',
          type: ''
        },
        freeMode: true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}

</script>
<style type="text/css" scoped>
  .v-swiper {
    position: relative;
    top: -3.4em;
  }

  .imgSty {
    border-radius: 8px;
    width: 95%;
  }

  .swiper-container {
    height: 400px;
  }

  .swiper-con:nth-child(even){
    position: relative;
    top: 80px;
  }

  @media screen and (max-width: 768px) {
    .swiper-container{
      height: 200px;
    }
  }
</style>
<style type="text/css">
  .swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: linear!important;
    -moz-transition-timing-function: linear!important;
    -ms-transition-timing-function: linear!important;
    -o-transition-timing-function: linear!important;
    transition-timing-function: linear!important;
  }
</style>