サイト制作で、ページトップでスライドショーを入れたいなと思ったことはありませんか？
そんな方に必見！
「こんなに簡単だったんだ」と思えるくらい簡単に説明していくので、是非学習の参考にしてください！
今回僕が紹介するのは、Slickでのスライドショーの手順を紹介していきたいと思います！！
それでは説明していきます。
モジュールのインストール#
npm install vue-slick
npm install jquery
yarn
Slickのインポートとオプションの設定#
次に、スライドショーを実行するページでSlickをインポートし、オプションを設定していきます。
以下のコードをコピペするだけでOKです！
Home.vue
<script>
import Slick from 'vue-slick'
data() {
return{
slickOptions:{
arrows: true, //スライドの矢印ボタン
dots: true, //ドットマーク
autoplay: true, //自動スライド
autoplaySpeed: 4000, //自動スライド間隔(ms)
pauseOnFocus: false, //ドットマークを押すとスライドショーが止まるのを防ぐ
prevArrow:'<button type="button" class="slick-prev"></button>', //ひとつ前の画像に戻る矢印ボタン
nextArrow:'<button type="button" class="slick-next"></button>' //ひとつ先の画像に進む矢印ボタン
}
}
},
components: {
Slick
}
</script>
オプションは、基本的にはこれがあれば大丈夫です。なので、これをコピペしてください。
CSSファイルのインポート#
次は、まずnode_modules/slick-carousel/slickを開いてください。
そしたら、その中のslick.min.js,slick.css,slick-theme.css,fonts,ajax-loader.gifをpublicファルダに以下のようにコピーします。
C:.
│ data.json
│ favicon.ico
│ index.html
│
├─css
│ │ ajax-loader.gif //追加
│ │ config.rb
│ │ main.css
│ │ slick-theme.css //追加
│ │ slick.css //追加
│ │
│ └─fonts //追加
│
│
└─js
slick.min.js //追加
そしたら、CSSファイルをインポートします。
Home.vue
<style scoped>
@import "../../public/css/slick-theme.css";
@import "../../public/css/slick.css";
</style>
jsファイルの読み込み#
index.html
<body>
<script src="js/slick.min.js"></script>
</body>
また、以下を参考にして矢印ボタンやドットの場所や大きさを変更して見て下さい。
slick-theme.css
.slick-prev,.slick-next{z-index:1000} /* これを設定しないと矢印ボタンが画像に埋まる */
.slick-prev{left:-25px} /* 矢印ボタンの場所を調整 */
.slick-next{right:-25px} /* 矢印ボタンの場所を調整 */
.slick-bots{bottom:-25px} /* ここでドットの場所を調節 */
.slick-dots li button:before{font-size:6px} /* 大きさ調整 */
コンポーネントの追加#
最後は、コンポーネントを追加してスライドショーの画像を設定します
Home.vue
<Slick ref="slick" :options="slickOptions" class="slick-outer">
<div><img src="../assets/slideimg1.jpg" class="slick-img"></div>
<div><img src="../assets/slideimg2.jpg" class="slick-img"></div>
<div><img src="../assets/slideimg3.jpg" class="slick-img"></div>
</Slick>
画像を追加したい場合は、同じように追加してあげれば追加されます！
これで、スライドショーを実行できると思います！
何かご不明な点がございましたら、コメントにてご報告ください。
以上、「Vue.jsでSlick（スライドショー）を導入する方法」でした！！
良ければ、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading