[VUE.JS] How to Use and Configure vue-carousel

I had a project to create slides in a Webpack and VUE.JS environment, so I implemented it using vue-carousel.

INSTALLATION AND SETUP OF VUE-CAROUSEL

Although it's explained on GitHub, I'll also outline the same steps here.

//npm
npm install vue-carousel

//yarn
yarn add vue-carousel

Vue Configuration

//Global

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

//Local

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

HOW TO DESCRIBE SLIDES AND DETAILED SETTINGS

HTML Structure

<carousel>
  <slide>
    Slide 1 Content
  </slide>
  <slide>
    Slide 2 Content
  </slide>
</carousel>

Slide Settings -- Configuration

//<carouselに対してbindして使用
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

Event Settings -- Events

Several events are available. Use them by binding `v-on` to the target element.

<carousel @pagination-click="restartAutoplay">
    <slide
        @slideclick="handleSlideClick">
        Slide 1 Content
    </slide>
    ...
</carousel>

In the example above, the `restartAutoplay` method is called when the pagination is clicked.

When a slide is clicked, `handleSlideClick` is called.

When a method is called, slide information can be output for each event.

For example, with `slideclick`, you can receive a dataset as shown below.

handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
}

OTHER METHODS

Although not explicitly mentioned in the `vue-carousel` documentation, various methods can be used.

To use them, first add a `ref` attribute to the carousel element to make it referenceable.

//carouselにrefをつける
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false" ref="carousel">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

//$refs.carousel内のメソッドを使用する
 
restartAutoplay: function(index) {
    this.$refs.carousel.restartAutoplay()
}

//上記例だとオートプレイを再スタートさせる

//よく使いそうなメソッド
goToPage(5)    // 5のスライドを表示する
getNextPage()    // 次のスライドNOを取得する

Besides the methods mentioned above, there is various other data you can reference, such as the size of each slide.

You can check the available methods by logging `this.$refs.carousel` to the console.

RECOMMENDED VUE.JS BOOKS

I think books are helpful, but I truly realize that hands-on implementation in a real project leads to deeper learning.

Conversely, if you focus solely on implementation, you might miss opportunities to think about better coding practices, so I recommend revisiting books as well.

For those with some knowledge of JavaScript and Vue.js.