【Nuxt】Sliderをつかって横スライドを作成した話

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、Nuxt3でSliderを使って、WEBページによくあるような写真が横にスライドすることができて、スライドしてきたときに真ん中で止まるようなものを作成したいと思います。

# Sliderをインストール

以下のコマンドでsliderをインストールします。

```
npm i swiper
```
# 実際にSliderを使用する

vueファイルを以下のようにするといい感じのSliderが適応されます。

```vue:index.vue
<script setup lang="ts">
  import { Autoplay } from 'swiper';
  import 'swiper/css';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  const modules = [Autoplay];
</script>
<div class="relative m-2 mt-4 rounded-md bg-SubBgThemaColor p-2">
  <Swiper
    :slides-per-view="1.5"
    :speed="1000"
    :loop="true"
    :autoplay="{ delay: 3000 }"
    :modules="modules"
    :centered-slides="true"
    :space-between="30"
    :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }"
    :pagination="true"
  >
    <SwiperSlide>
      <nuxt-link
        target="_blank"
        class="flex items-center justify-center"
      >
        <img class="h-auto w-full" src="/images/notice/notice_1.jpeg" />
      </nuxt-link>
    </SwiperSlide>
    <SwiperSlide>
      <nuxt-link
        target="_blank"
        class="flex items-center justify-center"
      >
        <img class="h-auto w-full" src="/images/notice/notice_1.jpeg" />
      </nuxt-link>
    </SwiperSlide>
  </Swiper>
  <div
    class="swiper-button-prev absolute inset-y-1/2 left-0 z-10 ms-4 flex cursor-pointer items-center justify-center"
  >
    <img
      class="h-8 w-8 lg:h-20 lg:w-20"
      src="/images/items/left_arrow.svg"
    />
  </div>
  <div
    class="swiper-button-next absolute inset-y-1/2 right-0 z-10 me-4 flex cursor-pointer items-center justify-center"
  >
    <img
      class="h-8 w-8 lg:h-20 lg:w-20"
      src="/images/items/right_arrow.svg"
    />
  </div>
</div>
```


下の写真のような感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/d7e3d864-42e6-b49e-0cc1-bdc30ede8cb1.png)
（ちなみにこれはアンドゥさんというLineスタンプです。）

# Sliderのオプションについて

### space-between

スライド同士の横のスペースを設定できます。

例：`:space-between="50"`


### autoplay

自動で動くように設定できます。

例：`:autoplay="{ delay: 3000 }"`
※モジュールの中に入れないと動かないので注意`const modules = [Autoplay];`

```vue
import { Autoplay, Navigation, Pagination } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  const modules = [Autoplay, Pagination, Navigation];
```

### centered-slides

trueにすると表示されているものが真ん中に来ます。

例：`:centered-slides="true"`

### slides-per-view

一度に表示する枚数を選択できます。1.5とかにすることもできます。
例：`:slides-per-view="1.5"`

### speed

スライドのスピードを調整できる。（初期は300）
例：`:speed="1000"`


### navigation

スライドの左右の移動のボタンを付けることができます。
例：`:navigation="true"`
※モジュールの中に入れないと動かないので注意`const modules = [Navigation];`

```vue
import { Autoplay, Navigation, Pagination } from 'swiper';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  const modules = [Autoplay, Pagination, Navigation];
 ```

### pagination

ページネーション(〇ポチ)を付けることができます。
例：`:pagination="true"`
※モジュールの中に入れないと動かないので注意`const modules = [Pagination];`


# さいごに

やり方が違ったり、もっといいやり方、認識が間違っているよというようなことをお気づきの方は、はコメントしていただけると幸いです。

最後まで読んでいただきありがとうございました。


# 参考文献

https://swiperjs.com/vue#installation