Vue Slick旋转木马当前总滑动数

Question

我正在尝试使用vue-制作当前的幻灯片数量和幻灯片总数。这就是我到目前为止尝试过的。

<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>'
      );
    },
},

但这不管用。

下面是vue-slick-carousel API url。

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

我需要什么来修正代码来显示当前的幻灯片号和总幻灯片。(X) "3/10“

Answer 1

我最近也有同样的问题。这可能是迟来的，但对谁来说，它可能仍然关注：

如果您想要显示当前的页码而不是默认的点，那么在这个VueSlickCarousel文档页面的底部有一个示例，您应该很好。

如果您想在页面上的任何地方只显示当前的页码一次，我找到了一个对我有用的解决方案：

this.$refs解决方案对我不起作用，但这可能是由于我用来呈现<VueSlickCarousel>的v-if所致。v-if和this.$refs不太喜欢对方--参见Vue.js参考文献没有定义，尽管如此。$ref显示它们在那里。。

最后，我试着查看Vue Devtools中的子程序发出的事件，并找到了这个afterChange事件。

每次将旋转木马移动到下一页时(无论您是拖动-幻灯片还是单击箭头)，都会触发afterChange事件，并包含一个非常有用的param --当前页面索引。在我的例子中，这个参数从0开始，对于每一次更改，它都会增加或减少3--这是因为我的carrousel设置被设置为slidesToScroll : 3。

所以我的解决办法是：

1. 添加如下事件侦听器：<VueSlickCarousel @afterChange="afterPageChange">
2. 用初始值0在数据中创建sliderPageIndex。

​

data() {
  return {
    sliderPageIndex: 0;
  }
}

​

1. 在afterPageChange中创建methods: {}。

​

methods: {
  afterPageChange(page) {
    this.sliderPageIndex = page;
  }
}

​

1. 使用一些附加逻辑在computed: {}中创建computed: {}，以补偿上述slidesToScroll设置和从0开始的sliderPageIndex，如下所示：

​

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;
    }
  },
}

​

现在，您应该可以访问currentPage计算属性，并且可以在<template>中的任何地方使用它。

当涉及到totalPages时，我根据发送到旋转木马的图片数组的长度来计算它，而不是直接从旋转木马中获取它。在这里，我也补偿了carouselSettings --如果这需要进一步解释，请告诉我。

您可以阅读有关VueSlickCarousel events 这里的更多信息。希望这对某人有用！)

干杯，祝你今天愉快。