如何使用Vue-Carousel在点击元素上滑动？

Question

我很高兴今天提出我的第一个问题:)如何使用Vue-Carousel在点击元素上滑动？

我想通过单击输入来触发右侧的幻灯片。 这是我的代码基于文档：

<carousel id="demo_carousel">
  <slide class="slides_demo">
      <input type="button" @click="getNextPage()" value="Go" />
  </slide>
  <slide class="slides_demo">
      <p>This is next page</p>
  </slide>
</carousel>

这是我的职责：

  methods: {
    getNextPage:function() {
      if (this.currentPage < this.pageCount - 1) {
        return this.currentPage + 1;
      }
      return this.loop ? 0 : this.currentPage;
    }
  }

但滑动不会触发。我做错了什么？我应该创建自己的功能吗？

Vue-Carousel文档：（https://github.com/SSENSE/vue-carousel）

感谢您的帮助：）

Answer 1

好的，我自己找到了解决方案。希望它能在未来帮助人们：）

那是我的代码：

<div class="VueCarousel-inner">
<carousel id="demo_carousel">
  <slide class="slides_demo">
      <input type="button" @click="gotoSlide()" value="Go" />
  </slide>
  <slide class="slides_demo">
      <p>This is next page</p>
  </slide>
</carousel>
</div>

之前有一个div，哪个班级是＆＃34; VueCarousel-inner＆＃34;。它创建了一个包含所有轮播的数组。这就是为什么我必须指定＆＃34; slider [0]＆＃34;定位我的滑块。

我在方法中创建的功能会自动触发屏幕旁边所需的幻灯片：

gotoSlide: function(){
      let slider = window.document.getElementsByClassName('VueCarousel-inner');
      if (window.innerWidth < 810) {
        slider[0].style.transform = "translate3d(" + "-" + slider[0].style.flexBasis + ", 0px, 0px)";
      } else {
        slider[0].style.transform = "translate3d(-810px, 0px, 0px)";
      }
    }

它完全响应：）

谢谢大家的帮助！

Answer 2

如果要转到下一张或任何特定的幻灯片，则有一个功能goToPage。如果您设置ref="carousel"

，则可以使用以下代码

this.$refs.carousel.goToPage(this.$refs.carousel.currentPage + 1);

它将滑到下一页。