「swiper/react」をちょっとだけ使いやすくする

「swiper/react」をさわった時に少し触りやすいようにしたので、その時のコードです。

swiperjs.com

結果

使っているバージョン

• "react": "^18.2.0",
• "swiper": "^9.2.0",

コンポーネント側

import type { FC, ReactNode } from 'react';
import { Children } from 'react';
import 'swiper/css';
import { Swiper, SwiperSlide } from 'swiper/react';
import styles from './index.module.scss';

export type SliderProps = {
  children: ReactNode;
  slidesPerView: number;
  spaceBetween: number;
  loop?: boolean;
  visible?: 'visible';
};

export const Slider: FC<SliderProps> = ({ children, slidesPerView, spaceBetween, loop, visible }) => {
  return (
    <div className={styles['slider']} data-visible={visible}>
      <Swiper
        slidesPerView={slidesPerView}
        spaceBetween={spaceBetween}
        speed={500}
        className={styles['slider__swiper']}
        loop={loop}
      >
        {Children.map(children, (slide, index) => (
          <SwiperSlide key={index}>{slide}</SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

$root :'.slider';

.slider {
  // 何かのスタイル
}

.slider__swiper {
  #{$root}[data-modifier='visible'] & {
    overflow: visible !important;
  }
}

ページ側

<Slider slidesPerView={3} spaceBetween={96}>
  <p style={{ border: '1px solid #000' }}>テキスト1</p>
  <p style={{ border: '1px solid #000' }}>テキスト2</p>
  <p style={{ border: '1px solid #000' }}>テキスト3</p>
  <p style={{ border: '1px solid #000' }}>テキスト4</p>
  <p style={{ border: '1px solid #000' }}>テキスト5</p>
</Slider>