ポータルサイトブログVue-slickでサムネイル付きスライダーを実装
スライダー（カルーセル）のプラグインで人気の「Slick」ですが、jQueryで利用されているケースが多いかと思います。
ただ最近では Vue.jsで設定されるケースも増えてきていますので、今回は Vue.js でサムネイル付きスライダーを実装する方法を探っていきたいと思います。
Slickの基本
jQueryで利用する場合は公式サイトに設定方法が網羅されています。
【Slick公式サイト】
https://kenwheeler.github.io/slick/
Vue.js で利用する場合は公式のGitを確認しましょう。
【Vue-slick Git】
https://github.com/staskjs/vue-slick
まずは単一のスライダーを設置
Vue-slick を利用する場合はWebpacやlaravel-mixを使います。
今回はlaravel-mixでコンパイルしたファイルを読み込ませて実装します。
ソースは下記のような感じです。
//HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="app.css" />
</head>
<body>
<div id="app" v-cloak>
//ここにスライダーを設置
</div>
<script src="app.js"></script>
</body>
</html>
//app.js
import Vue from 'vue'
import Slick from 'vue-slick';
var app = new Vue({
components: { Slick },
el: '#app',
data: {
//ここにスライダーのオプションを設定
},
});//app.css
@import "../../node_modules/slick-carousel/slick/slick.css";
@import "../../node_modules/slick-carousel/slick/slick-theme.css";まず単一のスライダーを設置して動きを確認しましょう。
まずはapp.jsでオプションの最低限の設定をします。
//app.js
import Vue from 'vue'
import Slick from 'vue-slick';
var app = new Vue({
components: { Slick },
el: '#app',
data: {
slickOptions: {
slidesToShow: 1,
},
},
});設定したオプションをHTMLのタグに記載します。
//HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="app.css" />
</head>
<body>
<div id="app" v-cloak>
<slick ref="slick" :options="slickOptions">
<div style="height:400px; background: blue;"></div>
<div style="height:400px; background: yellow;"></div>
<div style="height:400px; background: red;"></div>
</slick>
</div>
<script src="app.js"></script>
</body>
</html>ドラッグして動作が確認出来たら続いてサムネイルと連動する設定を行います。
スライダーとサムネイルを連動
jQueryにおいてサムネイル付きのスライダーを設置する場合は下記のようなソースで可能です。
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});Vueにおいてもこちらを応用すれば簡単に設置可能です。//app.js
import Vue from 'vue'
import Slick from 'vue-slick';
var app = new Vue({
components: { Slick },
el: '#app',
data: {
//メイン
slickOptions: {
slidesToShow: 1,
asNavFor: '.slider-nav',
},
//サムネイル
slickNavOptions: {
slidesToShow: 3,
asNavFor: '.slider-for',
focusOnSelect: true,
},
},
});asNavForのプロパティにそれぞれのクラスを設定し、サムネイルのオプションの方にfocusOnSelect: trueを設定することが条件となります。
//HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="app.css" />
</head>
<body>
<div id="app" v-cloak>
<!--メイン-->
<slick ref="slick" :options="slickOptions" class="slider-for">
<div style="height:400px; background: blue;"></div>
<div style="height:400px; background: yellow;"></div>
<div style="height:400px; background: red;"></div>
</slick>
<!--サムネイル-->
<slick ref="slick" :options="slickNavOptions" class="slider-nav">
<div style="height:400px; background: blue;"></div>
<div style="height:400px; background: yellow;"></div>
<div style="height:400px; background: red;"></div>
</slick>
</div>
<script src="app.js"></script>
</body>
</html>
上記のようにHTMLを整えて完了です。
まとめ
様々なプラグインがVue.jsへの対応を進めていますが、調べてみてもわからないような事が多数でてきてしまいます。
後発の技術なので仕方がないのですが。トライ＆エラーで正解を見つけていくのが正攻法な感じがしました。