vue-slickで特定の任意のスライドに移動する方法（slickGoTo的な）

今回はvue-slickでクリック時に特定の任意のスライドに移動できる機能（slickGoTo的なやつ）の作り方を紹介します。普段スライダーはslickを使っているので、vue-slickでも同じような動きができないかなーと思い調べてみました。

ちなみにVueでスライダーを作りたいならvue-slickではなくSwiperや他のライブラリの方がいいと思います。slickはjQuery依存なのでVueで使いたいならvue-slickという方を使う必要がありますが、本家slickと使用感が若干違いあまり使いやすいとは思いませんでした（細かい動きの制御がしんどい）。
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など他のライブラリのほうが良さそうだと感じましたね…。

ZennでCSS設計の
本を書きました！