【Vue.js】スライダー実装プラグイン「Slick」の基本的な使い方

 javascriptのスライダー系プラグインとして有名な「slick」。jQueryではとても有名なプラグインなので実際に利用したことがある人も多いと思いますが、今回はそのSlickのvue.js版の基本的な使い方を紹介したいと思います。

環境

 とりあえず、今回の基本的な環境は下記の通り、Webpackで構築したSPA環境で試してみたいと思います。

今回の環境

  • Webpack環境(v4.29.6)
  • vue v2.9.6
  • Node.js v10.12.0

 なお、Webpackのインストール、構築方法は下記記事で紹介しています。

Slickのインストール

 では、まずSlickのインストールをしていきます。

 インストール自体は公式のGithubプロジェクトディレクトリに移動して下記コマンドでインストール可能です。

jQueryのインストールが求められたら、下記コマンドでインストールしましょう。

 インストールに成功したら、「node_modules」ディレクトリ内に「vue-slick」というディレクトリが生成されていると思うので確認してください。

サンプルファイル作成

 インストールが完了したら、早速実装していきたいと思いますが、まずはSlickを適用したいファイルを作成したいと思います。

 下記の内容のファイルをComponentsディレクトリにSample.vueとして保存します。

 内容としては、単純に画像をdivで囲ったタグが3つ並んでいるという内容になります。この時点では画像が3枚縦に並んでいるという状態になります。

Slickを適用する

 では、公式のGithubに記載されている方法でこのファイルにSlickを適用してスライダーを作成してみます。

 これで簡単なスライダーが実装することができます。

 ソースを見てもらえればわかると思いますが、Slick適用に際して追記した部分はコメントアウトしています。一応流れとしては下記の通りとなります。

Slick適用の流れ

  • Slickの読み込み(15行目)
  • Slickのcssの読み込み(16行目)
  • componentsにSlickを登録(29行目)
  • slickOptionsにスライダー設定のオプションを設定(23行目)
  • 対象コンテンツをSlickタグで囲む(5〜9行目)
  •  基本的には上記の流れでSlickの適用は完了です。あとはslickOptionsに適宜必要なオプションを設定してください。Slickで用意されているオプションは公式サイトのSettingに記載されているのでそちらを参照しつつ設定してみてください。ちなみに、ここでは「arrows」というオプションをfalseに設定してnextボタンとprevボタンを非表示にしています。

    v-for文にSlickを適用してみる

     上記の方法で、基本的なスライダーの実装は可能ですが、続いてv-forで動的にコンテンツを生成するケースも多いと思うので、v-forバージョンも念の為作成してみたいと思います。

     上記のとおりで、先ほどのSample.vueファイルの画像が3つ並んでいた箇所をv-forで動的に生成するようにカスタマイズしています。

     簡単に説明すると、photosという配列に3つの画像名を格納して、その配列をv-forで回しつつ、getImage関数で画像の読み込みをしているという感じですね。Slickの設定に関してはSample.vueと同じになります。

    まとめ

     ということで、今回はVue.js版のSlickを使用して簡単なスライダーを作成してみました。

     なんでもかんでもプラグインに頼るのは個人的には好きではありませんが、時間がない場合等はプラグインも有効利用すると便利なので覚えておくといいかもですね。

     てことで、今回はここまで!また!

    お仕事のご相談・ご依頼
    お気軽にお問い合わせください!

    お仕事の依頼はこちら

    著者プロフィール

    Takanori Hashi

    東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

    人気記事

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です