webpackjavascriptのスライダー系プラグインとして有名な「slick」。jQueryではとても有名なプラグインなので実際に利用したことがある人も多いと思いますが、今回はそのSlickのvue.js版の基本的な使い方を紹介したいと思います。環境とりあえず、今回の基本的な環境は下記の通り、Webpackで構築したSPA環境で試してみたいと思います。v10.12.0なお、Webpackのインストール、構築方法は下記記事で紹介しています。関連記事Webpackを使ってVue.jsのSPA環境を簡単に構築をするどうも、こんにちわ。気づけば2019年もあっという間に3月ですね。この間年が開けたような気もするのですが。...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を使用して簡単なスライダーを作成してみました。なんでもかんでもプラグインに頼るのは個人的には好きではありませんが、時間がない場合等はプラグインも有効利用すると便利なので覚えておくといいかもですね。webpack著者プロフィールTaka東京、奄美大島を拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。