カルーセルのCSSを変更する

別記事で作成したカルーセルに、機能追加とページネーションのCSSを変更します。

import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react' //カルーセルに必要なタグをインポート
import SwiperCore, { Pagination, Autoplay, EffectFade } from 'swiper' //欲しい機能をインポート
import s from './TestCarousel.module.css' //同じディレクトリにCSSを用意

SwiperCore.use([Pagination, Autoplay, EffectFade])

const images = [
  '/test_image.jpg',
  '/test_image2.jpg',
  '/test_image.jpg',
  '/test_image2.jpg',
]

const TestCarousel = () => {
  return (
    <Swiper
      slidesPerView={1}
      pagination={{
        clickable: true,
        bulletClass: `swiper-pagination-bullet ${s.custom_bullet}`, //非アクティブなアイコンのクラスを指定
        bulletActiveClass: `swiper-pagination-bullet-active ${s.custom_bullet_active}`, //アクティブなアイコンのクラスを指定
      }}
      autoplay={{ delay: 1000, disableOnInteraction: true }}
      speed={500}
      effect="fade"
      fadeEffect={{ crossFade: true }}
      loop={true}
    >
      {images.map((src: string, index: number) => {
        return (
          <SwiperSlide key={`${index}`}>
            <Image
              src={src}
              layout="responsive"
              width={640}
              height={400}
              alt="test_image"
            />
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}
export default TestCarousel

// TestCarousel.module.css
.custom_bullet {
  background: white;
  opacity: 0.5;
} 

.custom_bullet_active {
  background: white;
  opacity: 1;
}

自動スライド送りと切り替え時にフェードがかかる様にしました。

ページネーションのアイコン（bullet）のクラスに、デフォルトで付くクラス名と独自のクラス名をつけることでTestCarousel.module.cssのCSSで上書きすることができます。

これで、ページネーションのアイコンの色を変更することができました。

最後に

Swiperは情報が多いのと簡単に独自のカルーセルが作成できるので、とても有用です。
参考にしたサイトは、下に貼ってあります.
間違っているところやよりよい方法をご存知の方がいれば、ご指摘いただけると助かります。

参考にしたサイト