несколько загрузочных каруселей на странице не работают - PullRequest
Новая
       19

несколько загрузочных каруселей на странице не работают

0 голосов
/ 20 февраля 2019

Я использую vue.js для создания сайта SPA с начальной загрузкой 3.3.7, на моем сайте 3 карусели,

это образец моего компонента карусели, 

<template>
  <div id="myTourCarousel" class="carousel slide" data- 
   ride="carousel">
    <div class="carousel-inner carousel_body" v-if="SliderFor 
 =='Tour'">
  <div :class="[i == 0 ? 'item active ' : 'item']" v-for="(item,i) in getTour" :key="'T'+i">
    <img :src="item.image_url" class="carousel_image" :alt="item.image_url">
  </div>
</div>
<!-- Left and right controls -->
<div class="carousel_btn_holder">
  <a
    class="left carousel-control Tour_carousel_prev carousel_btns"
    href="#myTourCarousel"
    data-slide="prev"
  >
    <img src="../../assets/prev.svg" alt>
  </a>
  <div class="Tour_image_thumb_holder" v-if="SliderFor == 'Tour'">
    <img
      v-for="(item,i) in getTour ? getTour.slice(0, 5) : []"
      :key="i"
      :src="item.image_url"
      :alt="item.image_url"
      class="image_thumb"
    >
  </div>
  <a
    class="right carousel-control Tour_carousel_next carousel_btns"
    href="#myTourCarousel"
    data-slide="next"
  >
    <img src="../../assets/next.svg" alt>
  </a>
</div>

У меня есть 3 из этих компонентов с 3 различными IDS, когда изображения добавляются, карусель не прокручивается автоматически, и кнопки не работают.

Данные поступают в компонент через вычисляемое свойство

Но они иногда работают случайным образом.Кто-нибудь имел эту проблему раньше.

...