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

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

環境

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

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

Slickのインストール

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

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

$ npm install vue-slick

view raw vue-js-slick_1 hosted with by GitHub

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

$ npm install --save jquery

view raw vue-js-slick_2 hosted with by GitHub

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

サンプルファイル作成

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

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

	<template>
	<div class="sample">
	<h1>{{msg}}</h1>
	<div><img src="../assets/pic1.jpg"></div>
	<div><img src="../assets/pic2.jpg"></div>
	<div><img src="../assets/pic3.jpg"></div>
	</div>
	</template>
	<script>
	export default {
	name: 'Sample',
	data () {
	return {
	msg: 'Making a Slider Contents by Slick'
	}
	}
	}
	</script>
	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style scoped>
	h1 {
	font-weight: normal;
	}
	</style>

view raw vue-js-slick_3 hosted with by GitHub

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

Slickを適用する

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

	<template>
	<div class="sample">
	<h1>{{msg}}</h1>
	<!-- Slickタグで対象タグを囲む -->
	<slick ref="slick" :options="slickOptions"><!-- refプロパティにslickを指定してオプションも設定する -->
	<div><img src="../assets/pic1.jpg"></div>
	<div><img src="../assets/pic2.jpg"></div>
	<div><img src="../assets/pic3.jpg"></div>
	</slick>
	<!-- End -->
	</div>
	</template>
	<script>
	import Slick from 'vue-slick' // Slick読み込み
	import '../../node_modules/slick-carousel/slick/slick.css' // Slickのcss読み込み
	export default {
	name: 'Sample',
	data () {
	return {
	msg: 'Making a Slider Contents by Slick',
	// Slickのオプションを設定
	slickOptions: {
	arrows: false
	}
	}
	},
	// コンポーネンツにSlickを登録
	components: {
	Slick
	}
	}
	</script>
	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style scoped>
	h1 {
	font-weight: normal;
	}
	</style>

view raw vue-js-slick_4 hosted with by GitHub

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

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

　基本的には上記の流れでSlickの適用は完了です。あとはslickOptionsに適宜必要なオプションを設定してください。Slickで用意されているオプションは公式サイトのSettingに記載されているのでそちらを参照しつつ設定してみてください。ちなみに、ここでは「arrows」というオプションをfalseに設定してnextボタンとprevボタンを非表示にしています。

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

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

	<template>
	<div class="sample">
	<h1>{{msg}}</h1>
	<!-- Slickタグで対象タグを囲む -->
	<slick ref="slick" :options="slickOptions"><!-- refプロパティにslickを指定してオプションも設定する -->
	<div v-for='(value, index) in photos' :key='index'><img :src="getImage(index)"></div>
	</slick>
	<!-- End -->
	</div>
	</template>
	<script>
	import Slick from 'vue-slick' // Slick読み込み
	import '../../node_modules/slick-carousel/slick/slick.css' // Slickのcss読み込み
	export default {
	name: 'Sample',
	data () {
	return {
	msg: 'Making a Dynamic Contents by Slick',
	photos: ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'],
	// Slickのオプションを設定
	slickOptions: {
	arrows: false
	}
	}
	},
	// コンポーネンツにSlickを登録
	components: {
	Slick
	},
	methods: {
	// 画像取得
	getImage: function (id) {
	return require('@/assets/' + this.photos[id])
	}
	}
	}
	</script>
	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style scoped>
	h1 {
	font-weight: normal;
	}
	</style>

view raw vue-js-slick_5 hosted with by GitHub

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

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

まとめ

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

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

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