Records about the use of pit encountered swiper

loop

Set to true open loop mode. loop mode: copies a number of slide (a default) before and after the original slide and switch at the right time, so that Swiper seems cycle.
loop mode when the jitter free mode with the use, as the copy free mode without a time point of the slide.

Here it will open loop mode when copying slide

Use renderBullet (pager) try not to open loop mode

• This is the pit I met
  

<swiper :options="swiperOption2" ref="mySwiper">
        <!-- slides -->
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <swiper-slide>I'm Slide 4</swiper-slide>
        <swiper-slide>I'm Slide 5</swiper-slide>
        <swiper-slide>I'm Slide 6</swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        <swiper-slide>I'm Slide 8</swiper-slide>
        <swiper-slide>I'm Slide 9</swiper-slide>
        <swiper-slide>I'm Slide 10</swiper-slide>
        <swiper-slide>I'm Slide 11</swiper-slide>
        <swiper-slide>I'm Slide 12</swiper-slide>
        <swiper-slide>I'm Slide 13</swiper-slide>
        <swiper-slide>I'm Slide 14</swiper-slide>
        <swiper-slide>I'm Slide 15</swiper-slide>
        <swiper-slide>I'm Slide 16</swiper-slide>
        <swiper-slide>I'm Slide 17</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <swiper-slide>I'm Slide 18</swiper-slide>
        <!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
        <!-- <div class="swiper-button-next" slot="button-next"></div> -->
        <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
      </swiper>

swiperOption2: {
         autoplay: false,
         loop: true//这里我打开了循环
        slidesPerView: 3,//设置slider容器能够同时显示的slides数量
        slidesPerGroup: 3,//定义slides的数量多少为一组,这里一次切换一组也就是切换了3个
        slidesPerColumn: 2,//多行布局里面每列的slide数量
        slidesPerColumnFill: "column",//这里以列的形式排列
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function(index, className) {
            let text = "";
            switch (index) {
              case 0:
                text = "全部";
                break;
              case 1:
                text = "网站";
                break;
              case 2:
                text = "小程序";
                break;
              case 3:
                text = "APP";
                break;
            }
            return '<span class="' + className + '">' + text  + "</span>";
          }
        },
        

       
      }

Here the number of buttons as you build is the ratio of the number of the slide to generate, when you open Loop (circulation mode) will slide back and forth a number of replication, which would interfere with the generation number of buttons, thereby to less than your desired results, this is a pit, you will not want to record again fall into the pit again