Vuecarouselとは？
Vue.jsのプラグインの一つです。
画像をスライドさせることができます。
「vue.jsでどうやってデザイン的に動きのあるサイトを作ろうか」
と考えていたのですが、そもそもvue.jsはJavascriptのフレームワークでした！
（拡張機能でいろいろと動きをつけられる！！！感動）
今回作成するもの
画像を４枚並べて、下の●を押すことでスライドさせてみます。
インストール方法
ターミナルでVuecarouselを使用したいプロジェクト（フォルダ）に移動
下記の通り入力し、インストール完了！
npm install -S vue-carousel基本の設置方法（コンポーネント使用）
Componentsフォルダに「Vuecarousel.vue」を作成
<template>
<div id="app">
<carousel>
<slide>
<img src="../assets/analysis-g86bb0e24a_640.jpg" alt="スライド1">
</slide>
<slide>
<img src="../assets/coins-gb8a2f6d80_640.jpg" alt="スライド2">
</slide>
<slide>
<img src="../assets/home-ownership-g11bd713d3_640.jpg" alt="スライド3">
</slide>
<slide>
<img src="../assets/house-g6deeb89e2_640.jpg" alt="スライド4">
</slide>
</carousel>
</div>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
components: {
Carousel,
Slide
}
}
</script>（補足）コンポーネントの反映方法
表示させたいページ（今回だとHome.vue）に下記「//追記」部分を追記する
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<Vuecarousel></Vuecarousel>//追記
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Vuecarousel from '@/components/Vuecarousel.vue'//追記
export default {
name: 'Home',
components: {
HelloWorld,
Vuecarousel//追記
}
}
</script>（補足）オプション機能
画像の自動再生やループ表示も試してみました！
設定方法は簡単で、HTML（template）の carouselタグに追記するだけです
<carousel
:per-page="1" ←1ページにつき写真１枚表示
:autoplay="true" ←自動再生
:playspeed="1000" ←自動再生する速さ
:pauseOnFocus="true" ←表示中の画像にカーソルを合わせたら止まる
:loop="true" ←最後の画像になったら最初の画像に戻る
>他にもいろいろオプション機能あったり、これからも新しい機能が出てきそうなので、いいのがあればまたご紹介します！
オプション機能で作成した画面
まとめ
jQueryを１から勉強するのではなく、vue.jsの拡張をどんどん勉強して
デザイン的にも、コード的にも見やすいサイトを作っていけたらと思います。
最後まで読んでいただき、ありがとうございました！
↓よかったらいいねお願いします🥺
コメント