はじめに

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

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

Sliderをインストール

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

npm i swiper

実際にSliderを使用する

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

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>

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

（ちなみにこれはアンドゥさんというLineスタンプです。）

Sliderのオプションについて

space-between

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

例：:space-between="50"

autoplay

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

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

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];

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];

さいごに

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

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

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