引入vue-awesome-swiper 和模版加了loop和.swiper-pagination页面没有指示点也没有循环播放

Question

<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item of swiperOptions.banners" :key="item.id">
        <img
          class="swiper_img"
          :src="item.url"
          alt
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "banner",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          loop:true
        },
        banners: [
          {
            id: '001',
            url:"https://imgs.qunarzz.com/vs_ceph_vcimg/b8c4527c41649814cc4cf86880abba54.jpeg"
          },
          {
            id: '002',
            url:"https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg"
          },
          {
            id: '003',
            url:"https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg"
          }
        ]
      }
    };
  },
//   computed: {
//     swiper() {
//       return this.$refs.mySwiper.$swiper;
//     }
//   },
//   mounted() {
//     // console.log("Current Swiper instance object", this.swiper);
//     this.swiper.slideTo(3, 1000, false);
//   }
};
</script>
<style lang="stylus" scoped>

.swiper >>> .swiper-pagination-bullet-active {
  background: red;
}

.swiper_img {
  width: 100%;
  height: 3rem;
}

.swiper {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 3rem;
  background: #eee;
}
</style>

Answer 1

tom睡着了 2020-08-19 06:40:49

// vue-awesome-swiper2.6.7版本 
swiperOptions: {
  pagination: '.swiper-pagination',
  loop: true
}

不知道你用的是哪个版本的vue-awesome-swiper，如果是2.6.7按上面写没问题。

• tom睡着了 #1

  如果你用的是Swiper6 好像确实不能显示，github上有这个issue
  https://github.com/surmon-china/vue-awesome-swiper/issues/684

• Dell 回复 tom睡着了 #2

  感谢同学回答