1

我在 Nuxt 工作，我有一个来自 Vue Awesome Swiper 的轮播的错误，我的问题是它没有像我希望的那样无限循环，这有多个滑块，我认为这是问题 在这里输入图像描述 当我想要转到左侧的产品它不会在循环结束时结束，等等相反，如果我转到末尾以下元素不会将我发送到循环的开始

这是我的设置代码

swiperOption3: {
        initialSlide: 0,
        freeMode: true,
        slidesPerView: 2,
        slidesPerGroup: 1,
        loop: true,
        loopFillGroupWithBlank: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },

        breakpoints: {
          1024: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          868: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          800: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          500: {
            slidesPerView: 1,
            spaceBetween: 10
          },
          320: {
            slidesPerView: 1,
            spaceBetween: 10
          }
        }
      }

这是我的html的摘要

<swiper
    :options="swiperOption3"
    style="min-height:290px; margin-top:2%"
    ref="swiperMaxCard"
  >
    <swiper-slide
      v-for="(item, index) in imagenes"
      :key="index"
      style="text-align: -webkit-center;"
    >  

   <div v-if="
          index != $refs.swiperMaxCard.swiper.activeIndex + 1 &&
            !$vuetify.breakpoint.smOnly
        "></div>
<div  v-if="index == $refs.swiperMaxCard.swiper.activeIndex + 1 ||
            $vuetify.breakpoint.smOnly
        "></div>


</swiper-slide>
  </swiper>

在代码中它看起来像这样在此处输入图像描述，但如果它正在工作应该有许多 DOM 副本，它可以使用一个滑块进行查看。看到有几个人工作了，但是还是报循环中的一个bug的案例，这个是工具https://github.com/surmon-china/vue-awesome-swiper

4

0 回答 0