Insert custom text in VueJs Hooper pagination indicator

Question

I'm trying to make a slider in a Vue 2.xx component. I'd like to insert custom text in the slider pagination indicator. Here's my (wrong) code. Can anybody please tell me how to insert a header inside the indicator and give it an active class when the slide is visible.

<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>

Can anybody quickly help me please. Thanks!

Answer 1

Went through the hooper documentation and the closest thing to what you want is this:

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

It is not indicator-pagination but custom-controllers. You can easily write your own paginator and customize it however you want. And when the user clicks on one of the pages (dashes, links with custom text, whatever...) then you can just run something like:

this.$refs.carousel.slideTo(some_slide_number)

and that should slide to the proper slide. The whole thing will look something like this: (haven't tested it)

 <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>