今回はvue-slickでクリック時に特定の任意のスライドに移動できる機能（slickGoTo的なやつ）の作り方を紹介します。普段スライダーはslickを使っているので、vue-slickでも同じような動きができないかなーと思い調べてみました。
ちなみにVueでスライダーを作りたいならvue-slickではなくSwiperや他のライブラリの方がいいと思います。slickはjQuery依存なのでVueで使いたいならvue-slickという方を使う必要がありますが、本家slickと使用感が若干違いあまり使いやすいとは思いませんでした（細かい動きの制御がしんどい）。
SwiperならVueでも何でも使えるのでその方が良さそうです。
SwiperならVueでも何でも使えるのでその方が良さそうです。
vue-slickで特定の任意のスライドに移動する方法
vue-slickをインストールしていない人はインストールしましょう。
npm i vue-slick
slickGoToみたいに任意のスライドに移動するにはこんな感じで実装します。
<template>
<div>
<Slick ref="slick">
<!-- 各スライド -->
</Slick>
<div>
<button type="button" @click="prev">prev</button>
<button type="button" @click="slickGoTo(0)">1</button>
<button type="button" @click="slickGoTo(1)">2</button>
<button type="button" @click="slickGoTo(2)">3</button>
<button type="button" @click="next">next</button>
</div>
</div>
</template>
<script>
import Slick from "vue-slick";
import 'slick-carousel/slick/slick.css';
export default {
components: {
Slick,
},
methods: {
prev() {
this.$refs.slick.prev();
},
next() {
this.$refs.slick.next();
},
slickGoTo(index) {
this.$refs.slick.goTo(index);
},
},
};
</script>
this.$refs.slick.goTo(index)でindex番目のスライドに移動できます。引数にはテンプレート側（HTML側）でスライドの番号をそのまま渡してやればokです。<Slick>にref="slick"を付与するのを忘れないようにしましょう。
ちなみに前のスライドに移動はthis.$refs.slick.prev()、次のスライドに移動はthis.$refs.slick.next()でできます。
githubのvue-slickにあるsrc/のコードを読んだらgoTo()というslickGoToっぽい関数を見つけたので良かったですが、調べてもあまり情報が出てこなかったのでやっぱりスライダーを作りたいならSwiperなど他のライブラリのほうが良さそうだと感じましたね…。
