Добавление активного класса в Swiper вручную при использовании Vue.js и виртуальных слайдов - PullRequest
Новая
       16

Добавление активного класса в Swiper вручную при использовании Vue.js и виртуальных слайдов

0 голосов
/ 08 марта 2019

Я использую Vue Awesome Swiper , компонент для Vue.js - с параметрами виртуальных слайдов, как показано в документах здесь .По какой-то причине класс .swiper-slide-active не добавляется при использовании таким способом.Есть ли способ, которым я мог бы вручную добавить активный класс?У меня есть доступ к полной API и такие вещи, как activeIndex и т. Д., Но я могу найти решение.

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >{{slide}}</div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper/dist/js/swiper.esm.bundle';
  export default {
    data() {
      return {
        slides: (function () {
          var slides = [];
          $.getJSON(url, function(data) {
           $.each(data, function(i,item ) {
            slides.push(item.slide);
           });
          }).done(function() {
           console.log('success');
          });
          return slides;
        }()),
        virtualData: {
          slides: [],
        },
      }
    },
    mounted() {
      const self = this;
      const swiper = new Swiper('.swiper-container', {
        virtual: {
          slides: self.slides,
          renderExternal(data) {
            // assign virtual slides data
            self.virtualData = data;
          },
        },
      });
    },
  };
</script>

Редактировать: Я думал, что разработал решение, но должен был использовать watchSlidesVisibility: true,, который добавляет swiper-slide-visible, но он не работал.

...