title: vue-awesome-swiper / The button name is shared, so other swiper move as well
body: <pre><code>&lt;template&gt;
    &lt;swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"&gt;
      &lt;swiper-slide&gt;I'm Slide 1&lt;/swiper-slide&gt;
      &lt;swiper-slide&gt;I'm Slide 2&lt;/swiper-slide&gt;
      &lt;swiper-slide&gt;I'm Slide 3&lt;/swiper-slide&gt;
      &lt;swiper-slide&gt;I'm Slide 4&lt;/swiper-slide&gt;
      &lt;div class="swiper-button-prev" slot="button-prev"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-next" slot="button-next"&gt;&lt;/div&gt;
    &lt;/swiper&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
               //sample items
          items: [ 
            {
              1:1
            },
            {
              2:2
            },
            {
              3:3
            },
          ],
          swiperOption: {
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          }
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>v-for creates a lot of swippers.
  However, the button name overlaps, so the swiper all moves together.</p>
  
  <p>I looked for something in Swiper API that could solve this problem, but I couldn't.</p>
  
  <p>Please help me if there is a way to solve this problem.....</p>