[VUE.JS]How to use and set vue-carousel

In webpack and VUE.JS environments, there was a project to make slides, so I implemented it using vue-carousel.
Here's a brief description of how to use vue-carousel.

Install and configure vue-carousel

Install using npm, etc.
I will write the same thing here though it is explained on GitHub.
vue-carousel[GitHub]

//npm
npm install vue-carousel

//yarn
yarn add vue-carousel

 

Vue settings

Set to Global when using on multiple pages

//Global

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

Vue.use(VueCarousel);

 
 

Set for component for specific pages

//Local

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

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

 
 

How to write slides and advanced settings

Structure of HTML

The description of html is as follows.

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

 
 

Slide Settings — Configuration

For the types of configurations that can be set, see GitHub below.
vue-carousel[GitHub]

You can check what kind of movement will be on the following site.
Vue-carousel–Examples

This section describes how to write and how to use config.

//<use v-bind
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

 

Set Events — Events

Several EVENTS are available.The event is used by v-on for the target element.

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

In the above example, the restartAutoplay method is called when you click pagination.
When you click the slide, handleSlideClick is called.

When the method is called, the slide information can be output for each event.
For example, slideclick can receive a dataset as follows.

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

 
 

About other methods

Although not in the vue-carousel description, various methods can be used.
The first way to use it is to add to the ref to carousel.

//add ref to carousel
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false" ref="carousel">
    <slide>
        Slide 1 Content
    </slide>
    <slide>
        Slide 2 Content
    </slide>
</carousel>

//Use methods in $refs.carousel
  
restartAutoplay: function(index) {
    this.$refs.carousel.restartAutoplay()
}

//abave case, autoplay is restarted.

//Methods that are likely to be used
goToPage(5)    // show No.5 slide
getNextPage()    // get next slide No

 
 

In addition to the above methods, there are various data that can be referred to, such as each size of the slide.
You can see the configured methods in console.log(this.$refs.carousel).

VUE.JS Recommended Books

I think that you are a reader of books, but I realize that you can learn more deeply by implementing them in the field.
On the other hand, if you focus on implementation, you will not be able to think of better coding, so it is recommended that you read the book again.
Vue.js 3 Cookbook: Discover actionable solutions for building modern web apps with the latest Vue features and TypeScript

#JavaScript #Vue