在 VueJs Hooper 分页指示器中插入自定义文本

Question

我正在尝试在 Vue 2.xx 组件中制作一个滑块。我想在滑块分页指示器中插入自定义文本。这是我的（错误的）代码。谁能告诉我如何在指示器中插入一个 header 并在幻灯片可见时给它一个活动的 class。

<hooper :auto-play="true" :play-speed="3000">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <hooper-navigation slot="hooper-addons">
      <h3 class="active">
        Example
      </h3>
      <h3>
        2nd Example
      </h3>
      <h3>
        Third example
      </h3>
    </hooper-navigation>
  </hooper>

import {
  Hooper,
  Slide,
  Pagination as HooperPagination
  } from 'hooper';

export default {
  components: {
    Hooper,
    Slide,
    HooperPagination
  }
}
</script>

任何人都可以快速帮助我。谢谢！

Answer 1

浏览了 hooper 文档，最接近您想要的是：

https://baianat.github.io/hooper/examples.html#custom-controllers

它不是指示器分页而是自定义控制器。您可以轻松编写自己的分页器并根据需要对其进行自定义。当用户点击其中一个页面（破折号、带有自定义文本的链接，等等...）时，您可以运行类似：

this.$refs.carousel.slideTo(some_slide_number)

那应该会滑到正确的幻灯片上。整个事情看起来像这样：（还没有测试过）

 <template>
  <hooper ref="carousel" @slide="updateCarousel">
    <slide>
      slide 1
    </slide>
    <slide>
      slide 2
    </slide>
    <slide>
      slide 3
    </slide>
    <slide>
      slide 4
    </slide>
    <slide>
      slide 5
    </slide>
  </hooper>
  
  <div @click="goToSlide(1)">Example 1</div>
  <div @click="goToSlide(2)">Example 2</div>
  <div @click="goToSlide(3)">Example 3</div>
  <div @click="goToSlide(4)">Example 4</div>
  <div @click="goToSlide(5)">Example 5</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    goToSlide(slide_number) {
      this.$refs.carousel.slideTo(slide_number);
    },
    updateCarousel(payload) {
      this.myCarouselData = payload.currentSlide;
    }
  }
}
</script>

在 VueJs Hooper 分页指示器中插入自定义文本

Insert custom text in VueJs Hooper pagination indicator

carousel

vue.js

vuejs2