Next.jsでSwiper Elementを使う

[Swiper React Components](https://swiperjs.com/react)が将来廃止になるということで[Swiper Element (WebComponent)](https://swiperjs.com/element)をnext.jsのプロジェクトに導入する際、なぜか横並びにならなくて詰まったので備忘。

``` 
"next": "14.2.3",
"react": "^18",
"swiper": "^11.1.3"
```

# うまくいかなかった時の画面
slides-per-view="1"の設定でもswiper-slideの数だけ横並びになってしまった。

![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263973/8a652d26-ce49-ceec-ab28-1e4d880ddbc3.png)

# うまくいったときの画面
![img02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263973/0d2189bb-b9cb-1c5b-e0c6-7b60c815638a.png)

# 原因
原因はreset.scssに書かれていた以下記述部分
swiper-slideに「all: unset;」が効いてしまっていたことが原因だった。
[all - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/all)
```reset.scss
*:where(
    :not(html, iframe, canvas, img, svg, video, audio):not(
        svg *,
        symbol *
      )
  ) {
  all: unset;
  display: revert;
}
```

:notのところに「swiper-slide」を追加することでうまく動作した。
```reset.scss
*:where(
    :not(html, iframe, canvas, img, svg, video, audio, swiper-slide):not(
        svg *,
        symbol *
      )
  ) {
  all: unset;
  display: revert;
}
```


# Swiper Elementを使用した書き方
```SwiperComponents.js
"use client";
import React from "react";
import { register } from "swiper/element/bundle";

register();

export default function SwiperComponent() {
  return (
    <swiper-container
      slides-per-view="1"
      navigation="true"
      pagination="true"
      space-between={30}
    >
      <swiper-slide key="1">Slide 1</swiper-slide>
      <swiper-slide key="2">Slide 2</swiper-slide>
      <swiper-slide key="3">Slide 3</swiper-slide>
    </swiper-container>
  );
}
```

ページネーションのドットのスタイル変更CSS
```scss
swiper-container {
  &::part(container) {
    padding-bottom: 25px;
  }
  &::part(pagination) {
    bottom: 0;
  }
  &::part(bullet) {
    width: 30px;
    height: 3px;
    opacity: 0.8;
    background: #fff;
    border-radius: 0;
  }
  &::part(bullet-active) {
    width: 30px;
    height: 3px;
    border-radius: 0;
    background-color: $color-accent;
  }
}
```

完成形
左右の矢印は不要だったので「navigation="true"」は外しました。
![スクリーンショット 2024-05-27 16.42.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1263973/9dca93d7-b625-588a-8d38-035a3a524fe8.png)


# ちなみにSwiper React Componentsを使用した書き方
``` SwiperComponents.js
"use client";
import React from "react";

import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default function SwiperComponent() {
  return (
    <>
      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </>
  );
}
```


# 参考サイト
https://swiperjs.com/element#register-parameters

https://www.freecodecamp.org/news/how-to-set-up-swiper-element-in-a-react-application/#resetswipercustomstyles

https://zenn.dev/rsugi/articles/9d7479b7e3e27b