usoft-town/components/home/carousel.vue

<template>
  <div class="carousel">
    <div class="container">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in carouselData">
            <!--<a :href="banner.hrefUrl" target="_blank" v-if="banner.hrefUrl">-->
            <!--<img :src="banner.pictureUrl"/>-->
            <!--</a>-->
            <span>
              <img :src="item.url" style="width:100%;height:100%;">
            </span>
          </div>
          <div class="swiper-button-prev"/>
          <div class="swiper-button-next"/>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"/>
      </div>
      <slot/>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'Carousel',
      props: ['carouselData'],
      data () {
        return {
          activeSlide: 0,
          swiperOption: {
            autoplay: 6000,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            mousewheel: true,
            effect: 'fade',
            lazyLoading: true,
            loop: true,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next'
          }
        }
      }
    }
</script>

<style scoped>
.carousel{
  width:100%;
  margin:0 auto;
  text-align: center;
  position:relative;
}
  .container{
    width:100%;
    margin:0 auto;
    padding:0;
  }
</style>