Vue.jsのvue-slickプラグインを使用し、画像のカルーセルスライダーを実装します。

vue-slick のインストール

以下のnpmコマンドでインストールできます。インストールが完了すると「node_modules」フォルダ内に「vue-slick」フォルダが作成されます。

 npm install vue-slick

そもそものNode.jsとVue CLIの導入は以下をご参照下さい。

Vue CLIを導入する方法

注意点として、jqueryの導入も必要になります。下記エラーが出る場合はjqueryのインストールもして下さい。

This dependency was not found:

* jquery in ./node_modules/vue-slick/dist/slickCarousel.esm.js

To install it, you can run: npm install --save jquery

jqueryのインストール は以下で可能です。

npm install jquery --save

vue-slickの設定

Vueファイルは以下になります。

<template>
  <div class="main">

    <p>slick デフォルト ↓</p>
    <slick ref="slick" class="slick-outer">
      <div><img src="static/img/tokyost.jpg" class="slick-img">{{tokyo}}</div>
      <div><img src="static/img/osaka.jpg" class="slick-img">{{osaka}}</div>
      <div><img src="static/img/aso.jpg" class="slick-img">{{aso}}</div>
    </slick>

   <p>slick オプション指定 ↓</p>
   <slick ref="slick" :options="slickOptions" class="slick-outer">
      <div><img src="static/img/tokyost.jpg" class="slick-img">{{tokyo}}</div>
      <div><img src="static/img/osaka.jpg" class="slick-img">{{osaka}}</div>
      <div><img src="static/img/aso.jpg" class="slick-img">{{aso}}</div>
   </slick>

  </div>
</template>

<script>
import Slick from 'vue-slick'
import '../../node_modules/slick-carousel/slick/slick.css'
export default {
  name: 'Main',
  data () {
    return {
      tokyo: '東京駅',
      osaka: '大阪城',
      aso: '阿蘇山',
      slickOptions:{
        arrows: false,
        autoplay: true,
        autoplaySpeed: 1000,
      }
    }
  },
  components: {
    Slick
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.slick-outer{
  width:80%;
  padding:10px;
  margin:auto;
    margin-bottom:10px;
    background-color:lightgray;
}
.slick-img{
  margin:auto;
  width:50%;
  height:250px;
}

@media(max-width:768px) {
.slick-img{
  margin:auto;
  width:50%;
  height:150px;
}
}

</style>

Slickタグで対象のタグを囲みます。 

<slick ref="slick" class="slick-outer">
  <div><img src="static/img/tokyost.jpg" class="slick-img">{{tokyo}}</div>
  <div><img src="static/img/osaka.jpg" class="slick-img">{{osaka}}</div>
  <div><img src="static/img/aso.jpg" class="slick-img">{{aso}}</div>
</slick>
scriptでは、importでslickの読込みと、slickのcssの読込みを行います。
<script>
import Slick from 'vue-slick'
import '../../node_modules/slick-carousel/slick/slick.css'
export default {
  name: 'Main',
  data () {
    return {
      tokyo: '東京駅',
      osaka: '大阪城',
      aso: '阿蘇山',
      slickOptions:{
        arrows: false,
        autoplay: true,
        autoplaySpeed: 1000,
      }
    }
  },
  components: {
    Slick
  },
}
</script>

オプションの指定

オプションを指定する場合は、slickタグの中にoptionsを指定します。

<slick ref="slick" :options="slickOptions" class="slick-outer">

scriptのdata()のreturn内にslickOptionsを指定します。
今回は 以下の指定をしています。

arrows: falseで「prev」「next」のボタンを無くす。

autoplay: trueで自動にスライドをさせる。

autoplaySpeed: 1000で自動スライドのスピードを指定する。

その他のオプションは公式サイトを下さい。

  data () {
    return {
      tokyo: '東京駅',
      osaka: '大阪城',
      aso: '阿蘇山',
      slickOptions:{
        arrows: false,
        autoplay: true,
        autoplaySpeed: 1000,
      }
    }
  },

サンプル画面

サンプル画面はこちらです。

Vue.jsの学習はこちらがお勧めです！