Vue-awesome swiper，两个组件通过彼此的按钮滑动

Question

我使用 vue-awesome-swiper from here 但遇到了问题。滑动器有用于在内部滑动幻灯片的按钮（上一张幻灯片，下一张幻灯片），当我将这两个组件放在一个页面中时，它们通过彼此的按钮滑动幻灯片。因此，如果我尝试在第一个滑动器中滑动到下一个滑块，第二个滑动器也会滑动到下一个幻灯片。这是我的组件代码：

    <template>
  <div class="container">
      <div class="row">
          <div class="col-xs-12">
            <div class='mobSwip'>
              <div class="swiper-container" id="quick-view-slider">
                <swiper :options="swiperOption">
                  <swiper-slide v-for="screen in screens" :key="screen.key"><img v-bind:src="`https://admin.springsapps.com${screen.url}`"/></swiper-slide>
                  <swiper-slide v-if="!screens"><img src="@/assets/images/quick-view-1.png"/></swiper-slide>
                </swiper>
              </div>
              <!-- <div class="swiper-pagination" slot="pagination"></div> -->
              <div class="swiper-button-next"><span class="icon-play"></span></div>
              <div class="swiper-button-prev"><span class="icon-play-flip"></span></div>
              <!-- <button @click="swipeNext">next</button> -->
            </div>
            </div>
          </div>
        </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    props: {
      screens: {
        type: Array,
        required: false
      }
    },
    data: function () {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 30,
          centeredSlides: true,
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
            // nextEl: this.$el.querySelector('.swiper-button-next'),
            // prevEl: this.$el.querySelector('.swiper-button-prev')
          }
        },
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
      width: 40%;
  }
  .swiper-slide:nth-child(3n) {
      width: 20%;
  }
</style>

我尝试使用查询选择器，通过 refs 获取按钮 classes，尝试通过官方文档中的方法滑动，但它不起作用。这个按钮工作的唯一方法是通过 class 在数据对象中获取它们，就像在我的代码中一样...如何使我的按钮有用且独立？

Answer 1

我已经解决了！通过在 swiper 上查询 ref 并使用

this.$refs.mobileScreensSwiper.swiper.slideNext()

作为方法

Answer 2

这是为我修复的（Nuxt.js/SSR 项目）：

1) 两个滑动器都在不同的组件中（不确定是否需要）

2) 给按钮的div添加id属性： <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div> <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

3) 在滑动选项对象中，引用新的 ids 而不是 swiper-button-prev 和 swiper-button-next 类:

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

Answer 3

我用

this.$refs.swiper.swiperInstance.autoplay.start()

Vue-awesome swiper，两个组件通过彼此的按钮滑动

Vue-awesome swiper, two components swipes by buttons of each other

javascript

swiper

vue.js

vue-component