问轮播的问题

前面好几节我就注意到了，不知道跟着教程做了啥banner图轮播就不动了，我还以为我的问题，后来发现视频中其实轮播也没有动。这个怎么办

-------------------------------------------------------------

<template>

  <div class="wrapper">

    <swiper ref="mySwiper" :options="swiperOptions"  v-if="showSwiper">

    <swiper-slide v-for="(item,key) of list" :key="key">

      <img class="swiper-img" :src="item.imgUrl">

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination" ></div>

  </swiper>

  </div>

</template>

<script>

export default {

  name: 'HomeSwiper',

  props: {

    list: Array

  },

  data () {

    return {

      swiperOptions: {

        pagination: '.swiper-pagination',

        loop: true

      }

    }

  },

  computed: {

    showSwiper () {

      return this.list.length

    }

  }

}

</script>

<style lang="scss" scoped>

  .wrapper >>> .swiper-pagination-bullet-active{

    background: #fff;

  }

  .wrapper{

    overflow: hidden;

    height: 31.25vw;

    .swiper-img{

      width: 100%;

  }

  }

</style>