I am happy to ask my first question today :) How to slide on click element with Vue-Carousel?

I would like to trigger slide on right with a single click on my input. This is my code based on documentation:

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

And this is my function:

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

But the sliding doesn’t trigger. What I’ve done wrong? Should I create my own function?

Vue-Carousel documentation: ()

Thanks for help :)

I am happy to ask my first question today :) How to slide on click element with Vue-Carousel?

I would like to trigger slide on right with a single click on my input. This is my code based on documentation:

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

And this is my function:

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

But the sliding doesn’t trigger. What I’ve done wrong? Should I create my own function?

Vue-Carousel documentation: (https://github./SSENSE/vue-carousel)

Thanks for help :)

• javascript
• vue.js
• carousel

• can you show the rest of your code? where are stored variables like currentPage or pageCount? – Giao Ciampoli Commented Apr 7, 2018 at 10:22
• Hello @LimeInTheCoconut I use methods from Carousel module that I use: github./SSENSE/vue-carousel/blob/master/src/Carousel.vue but I am not really sure that it applies... – BiggestCast Commented Apr 7, 2018 at 10:24
• well if you can recreate a runnable script: stackoverflow.blog/2014/09/16/… or a jsfiddle would be a great help to understand what's going wrong – Giao Ciampoli Commented Apr 7, 2018 at 10:47
• @LimeInTheCoconut I've tried to apply this carousel as a library but it didn't worked :( Thanks anyway for your help my friend – BiggestCast Commented Apr 7, 2018 at 11:12
• codesandbox is probably a better place for vue codes: codesandbox.io/s/vue – A. L Commented Apr 7, 2018 at 11:50

3 Answers 3

Okay guys, I found my solution by myself. Hope it can help people in the future :)

That is my code:

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

There was a div before, which class was "VueCarousel-inner". It creates an array with all carousels inside. This is why I had to specify "slider[0]" to target my slider.

And the function i've created in methods that triggers automatically the slide you want by side of screen:

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)";
      }
    }

And it is fully responsive :)

Thank you everybody for your help !

There's a function goToPage if you want to go to next or any specific slide. You can use the below code if you set ref="carousel"

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

It'll slide to the next page.

There is a property navigateTo