vue-slick-carouselの使い方　レスポンシブ対応などオプションの書き方

vue-slick-carouselとは

vue-slick-carouselとは

カルーセルで大人気のプラグイン、slick.js。

そのVue版の１つがvue-slick-carouselです。

Nuxt.jsでももちろん使えます。

install

npm i vue-slick-carousel

yarnの場合は

yarn add vue-slick-carousel

template

<template>
<div>
<VueSlickCarousel v-bind="settings">
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
<div><img src="https://dummyimage.com/200x200/000/fff" alt=""></div>
</VueSlickCarousel>
</div>
</template>

script.js

import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
  name: 'MyComponent',
  components: { VueSlickCarousel },
  data () {
    return {
      settings: {
        "dots": true,
        "infinite": false,
        "speed": 500,
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "initialSlide": 3,
        "responsive": [
          {
            "breakpoint": 1024,
            "settings": {
              "slidesToShow": 1,
              "slidesToScroll": 1,
              "infinite": true,
              "dots": true
            }
          },
          {
            "breakpoint": 600,
            "settings": {
              "slidesToShow": 1,
              "slidesToScroll": 1,
              "initialSlide": 1
            }
          },
          {
            "breakpoint": 480,
            "settings": {
              "slidesToShow": 1,
              "slidesToScroll": 1
           }
         }
       ]
     }
   }
 }
}

settingsで設定した値がオプションとなります。
v-bindでcomponentに渡せばOKです。