0

I am trying to make current number and total number of slides using vue-slick-carousel. This is what I tried so far.

<VueSlickCarousel ref="carousel">
<div>1 <button tabindex="-1">11</button></div>
<div>2 <button tabindex="-1">22</button></div>
<div>3 <button tabindex="-1">33</button></div>
<div>4<button tabindex="-1">44</button></div>
</VueSlickCarousel>


methods: {
    customPaging: function (slider, i) {
      var slideNumber = i + 1,
        totalSlides = slider.slideCount;
      return (
        '<a class="custom-dot" role="button" title="' + slideNumber + ' of ' + totalSlides + '"><span class="string">' + slideNumber + '</span></a>'
      );
    },
},

But this is not working.

And this is vue-slick-carousel API url below.

https://github.com/gs-shop/vue-slick-carousel/blob/master/docs/API.md#methods

What do i need to fixed the code to show a current slide number and total slide. ex) "3/10"

user1833620
  • 751
  • 1
  • 10
  • 30

1 Answers1

2

I had the same problem recently. This probably comes late, but to whom it may still concern:

If you want to display current page numbers instead of the default dots, there is an example at the bottom of this VueSlickCarousel documentation page and you should be good.

If you want to display the current page number only once anywhere on your page, I found a solution that worked for me:

this.$refs solution did not work for me, but this was likely due to v-if that I was using to render the <VueSlickCarousel>. v-if and this.$refs don't like each other very much - see also Vue.js refs are undefined, even though this.$refs shows they're there.

Eventually I tried looking at the events that the children emitted in Vue Devtools and I found this afterChange event.

The afterChange event is fired each time you move your carousel to the next page (regardless of whether you drag-slide or click the arrow) and contains a very useful param - the current page index. In my case, this param starts at 0 and for each change it is incremented or decremented by 3 - that is because my carrousel settings are set to slidesToScroll : 3.

So my solution was to:

  1. Add event listener like this: <VueSlickCarousel @afterChange="afterPageChange">
  2. Create the sliderPageIndex in your data with the initial value 0.

data() {
  return {
    sliderPageIndex: 0;
  }
}
  1. Create the afterPageChange in methods: {}.

methods: {
  afterPageChange(page) {
    this.sliderPageIndex = page;
  }
}
  1. Create the currentPage in computed: {} with some additional logic to compensate for the abovementioned slidesToScroll setting and for the sliderPageIndex starting at 0, like this:

computed: {
  currentPage() {
    // always display 1 if page index is 0
    if (this.sliderPageIndex == 0) {
      return 1;
    } else {
      // compensate for slidesToScroll settings and compensate the shift by 1
      return this.sliderPageIndex / this.carouselSettings.slidesToScroll + 1;
    }
  },
}

Now you should have access to the currentPage computed property and can use it anywhere in your <template>.

When it comes to the totalPages, I compute it from the length of the picture array that I send to the carousel instead of taking it from the carousel directly. Here, I also compensate for carouselSettings - if this requires further explanation, let me know.

You can read more about the VueSlickCarousel events here. Hope this will be of use to someone! :)

Cheers and have a nice day.

Detheuss
  • 21
  • 4