#89　Vue.jsで画像のスライドショーを作ってみた

## はじめに
今回は、Vue.jsを使って画像のスライドショーを作成してみます。

## 準備
### Vue.jsのプロジェクトをセットアップする
今回は、Vue CLIを使用します。
1. **Vue CLIのインストール**  
   Vue CLIがインストールされていない場合は、以下のコマンドでインストールします
   ```bash
   npm install -g @vue/cli
   ```
   <br>
2. **新しいVueプロジェクトの作成**  
   Vue CLIを使って新しいプロジェクトを作成します。
   ```bash
    vue create <your-project-name>
   ```
    コマンド実行時にいくつか質問されます。お好みの設定にしてください。

3. **依存関係をインストールし、開発サーバーを起動する**
 作成した新しいプロジェクトに移動し、コマンドを実行します。
   ```bash
   cd <your-project-name>
   npm install
   npm run serve
   ```

#### プレイグラウンド環境
Vue SFC Playground を使うと手軽にVueを始められるのでおすすめです。
https://ja.vuejs.org/guide/quick-start#try-vue-online

## 実装
### 画像スライドショーのコンポーネントを作成する
画像のスライドを行うコンポーネント、src\components\Slideshow.vue を作成します。
複数の画像を順に表示、ナビゲーションボタンを押下で前後の画像にスライドできるようにします。

```Slideshow.vue
<template>
  <div class="slideshow">
    <img :src="images[currentIndex]" class="slide-image" />
    <button @click="prevSlide" class="nav-button prev-button">‹</button>
    <button @click="nextSlide" class="nav-button next-button">›</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表示中のスライドのインデックス
      currentIndex: 0,
      // 表示する画像のリスト
      images: [
        '{Image1のパス}',
        '{Image2のパス}',
        '{Image3のパス}',
        '{Image4のパス}',      
      ]
    };
  },
  methods: {
    // 前のスライドを表示する
    prevSlide() {
      this.currentIndex = (this.currentIndex == 0) ? this.images.length - 1 : this.currentIndex - 1;
    },
    // 次のスライドを表示する
    nextSlide() {
      this.currentIndex = (this.currentIndex == this.images.length - 1) ? 0 : this.currentIndex + 1;
    }
  }
};
</script>

<style scoped>
.slideshow {
  width: 500px;
  position: relative;
}

.slide-image {
  width: 100%;
  height: auto;
}

.nav-button {
  border: none;
  background-color: #6699cc;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
}

.prev-button {
  left: 0;
}

.next-button {
  right: 0;
}
</style>
```

#### App.vue からコンポーネントを呼び出す
`Slideshow.vue` コンポーネントを使用するよう、`App.vue`ファイルを書き換えます。

```vue:vue
<template>
  <div id="app">
    <Slideshow />
  </div>
</template>

<script>
// Slideshow.vueをインポート
import Slideshow from './components/Slideshow.vue';

export default {
  components: {
    Slideshow
  }
};
</script>
```

## 実際に動かしてみる
以下のコマンドを実行しプロジェクトを実行します。
```bash
npm run dev
```
リストの一番先頭のスライドが表示されます。
<img src='https://www.nxted.co.jp/blog/img/95/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-08-20%20131510.png' width="380" data-meta='{"width":640,"height":434}'>

「>」押下で Image2 へ遷移、
<img src='https://www.nxted.co.jp/blog/img/95/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-08-20%20131618.png' width="380" data-meta='{"width":635,"height":426}'>

「<」押下で Image4 へ遷移します。
<img src='https://www.nxted.co.jp/blog/img/95/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-08-20%20131607.png' width="380" data-meta='{"width":628,"height":423}'>


### 最後に
今回は、Vue.jsを使って画像のスライドショーを作成してみました。
スライドの自動再生や、各スライドのサムネイル表示など拡張の余地があるので、今後試していきたいと思います。
ご覧いただきありがとうございました。

参照：https://ja.vuejs.org/guide/quick-start