Swiperを使ってスライダーを実装しよう

今回はホームページで絶対使うカルーセルスライダー

今まではswiper.jsよりslick.jsを使っていた。
一応、jQueryの書き方も参考までに

<ul id="slider">
  <li><img src="画像" alt=""></li>
  <li><img src="画像" alt=""></li>
  <li><img src="画像" alt=""></li>
  <li><img src="画像" alt=""></li>
</ul>
<script>
$("#slider").slick()
</script>

上記で簡単に動く。
もちろんオプションなどいっぱいあるので公式サイトをみてほしい

Vue3での実装

1.ターミナル

npm i swiper

2.componentsで

<template>
  <div class="setting">
    <Swiper class="overNone" :modules="swiperModules" navigation :pagination="pagioptions" :autoplay="autoplayOptions" :speed="speedOption.speed" :loop="true">
      <SwiperSlide v-for="(item, index) in slideItems" :key="index">
        <img :src="require(`../assets/${item}`)" alt="">
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script lang="ts" setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/scss/pagination';
import 'swiper/scss/navigation';

// オプション
const swiperModules = [Navigation, Pagination, Autoplay];
const pagioptions:{clickable:boolean} = {
  clickable:true,
}
const autoplayOptions:{delay:number,disableOnInteraction:boolean} = {
  delay: 5000,
  disableOnInteraction: false
}
const speedOption = {
  speed: 100
}
// 画像の設定
const slideItems:string[] = [
  'bg-01.jpg',
  'bg-02.jpg',
  'bg-03.jpg',
];
</script>

<style lang="scss">
.swiper{
  width: 100%;
  height: auto;
  overflow: hidden;
  .swiper-slide{
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.swiper-button-prev {
  color: blueviolet;
}
.overNone {
  overflow: initial;
}
</style>

上記で大体いいと思う。
もちろん違う動きやフェードなども公式サイトや検索で出てくるのでみてほしい。

---

感想

今回の実装もあまり感想はない。。。
propsなどで使うページでの画像設定などした方がいいとは思うので、そろそろvueの根本的なバインディングなどを書いて行こうと思う。