vue-slick-carouselとは
カルーセルで大人気のプラグイン、slick.js。
そのVue版の1つが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です。
コメント