javascript - 获取 slider 居中元素的对象

Question

我必须在页面的某处显示我动态传输到 slider 的对象的字段。它应该始终是位于 slider 中心的对象。

我正在使用 vue-awesome-slider。到目前为止，我有以下代码:

<v-layout>
      <v-flex xs4>
        <div >
          <p v-html="previewArtefact"></p>
        </div>
      </v-flex>
      <v-flex xs8>
        <swiper class="" :options="swiperOption" >

        <swiper-slide v-for="(artefact,i) in artefacts" :key="i" v-if="i<5">
            <web-artefact-card  :artefact='artefact'></web-artefact-card>
        </swiper-slide> 

        <div class="swiper-pagination " slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>

        </swiper>
      </v-flex>
</v-layout>

和:

data() {
return {
  previewArtefact:
    '<i style="padding-left:10%">The text of the artefact...</i>',
  swiperOption: {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  }
};

中心的幻灯片总是有一个类“.swiper-slide-active”，但我现在不知道我是否可以从中获取对象。 'prewiewArtefact' 应包含 artefact.text 。

Answer 1

呸，这很难 :D，好吧，这是一个对我有用的例子，我找不到更好的方法

<template>
 <div>
 <swiper :options="swiperOption" ref="mySwiperA">
  <!-- 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-slide>I'm Slide 4</swiper-slide>
  <swiper-slide>I'm Slide 5</swiper-slide>
  <swiper-slide>I'm Slide 6</swiper-slide>
  <swiper-slide>I'm Slide 7</swiper-slide>

 </swiper>

 <p>{{ swiper ? swiper.activeIndex : '' }}</p>
 </div>
</template>

<script>
 export default {
  data(){
   return {
    swiperOption:{
     slidesPerView: 3,
     centeredSlides: true,
     pagination: {
      el: ".swiper-pagination",
      clickable: true
     },
     navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
     }
    },
    swiper: null
  }
 },
 mounted(){
  this.swiper = this.$refs.mySwiperA.swiper
 }
}
</script>

只需在 vue 挂载时，您需要将 this.swiper 设置为 this.$refs.{swiper ref}.swiper 然后您可以通过以下方式获取事件索引调用 this.swiper.activeIndex