Конфликт двух компонентов Swiper на одной странице

153

20 декабря 2020, 19:10

Использую этот слайдер. Добавляю два компонента на страницу. Первый:

<div class="swiper-button-prev" v-on:click="prev"></div>
<swiper ref="mySwip" class="swipper" :options="swiperOption">
<swiper-slide class="swiper-slide swiper-slide_item" 
v-for="(item, index) in pack" :key="index.id">
<div>
{{item}}
</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next" v-on:click="next" ></div>

Второй:

<div class="swiper-button-prev" v-on:click="prev"></div>
<swiper ref="notMySwip" class="swipper" :options="swiperOption">
<swiper-slide class="swiper-slide swiper-slide_item" 
v-for="(item, index) in pack2" :key="index.id">
<div>
{{item}}
</div>
</swiper-slide>
</swiper>
<div class="swiper-button-next" v-on:click="next" ></div>

Первоначально в первом swiper данных больше, в втором к примеру три блока. Дело в том, что уменьшении ширины экрана, стрелки управления первым слайдером переключают второй слайдер. Никак не могу понять, где косяк. Рассчитываю на вашу помощь.

Vue.js

data:{
    pack1: {1,2,3 .....} //какие-нибудь данные
    pack2: {1,2,3 .....} //какие-нибудь данные
    swiperOption: {
    slidesPerView: 'auto',
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
}

------------------------------------------
            computed: {
                swiper() {
                    return this.$refs.mySwip.swiper
                },
                notMySwip() {
                    return this.$refs.notMySwip.swiper
                },
    }
------------------------------------------
        methods: {
            prev() {
                this.$refs.mySwip.swiper.slidePrev(25)
            },
            next() {
                this.$refs.mySwip.swiper.slideNext(25)
            },
}

Answer 1

Вот такая реализация должна работать без конфликта.

Vue.use(VueAwesomeSwiper) 
    new Vue({ 
    	 el: '#vueapp', 
       components: { 
 
    	 }, 
    	 data: { 
         swiperOption1: { 
            navigation: { 
              nextEl: '.selectornx1', 
              prevEl: '.selectorpr1' 
            } 
         }, 
         swiperOption2: { 
            navigation: { 
              nextEl: '.selectornx2', 
              prevEl: '.selectorpr2' 
            } 
         } 
    	 } 
    	})

 .relat{ 
 position:relative 
 } 
 .swiper-container { 
      height: 150px; 
      width: 100%; 
    } 
 
    .swiper-slide { 
      text-align: center; 
      font-size: 38px; 
      font-weight: 700; 
      background-color: #eee; 
      display: -webkit-box; 
      display: -ms-flexbox; 
      display: flex; 
      -webkit-box-pack: center; 
      -ms-flex-pack: center; 
      justify-content: center; 
      -webkit-box-align: center; 
      -ms-flex-align: center; 
      align-items: center; 
    }

<!-- Include stylesheet --> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"> 
    <!-- Include the Swiper library --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
    <!-- Swiper JS Vue --> 
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script> 
 
    <div id="vueapp"> 
     
    <div class="relat"> 
        <swiper :options="swiperOption1"> 
          <!-- slides --> 
          <swiper-slide>I'm Slide 1</swiper-slide> 
          <swiper-slide>I'm Slide 2</swiper-slide> 
        </swiper> 
         
          <div class="swiper-button-prev selectorpr1"></div> 
          <div class="swiper-button-next selectornx1"></div> 
      </div> 
       
      <div class="relat"> 
          <swiper :options="swiperOption2"> 
          <!-- 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>   
                 
          <div class="swiper-button-prev selectorpr2"></div> 
          <div class="swiper-button-next selectornx2"></div> 
       </div> 
         
    </div>