【Swiper×React】矢印とドットを外に出す方法

Swiper×Reactで作成したスライダーのナビゲーション（矢印）とページネーション（ドット）をスライドの外に配置したい時があると思います。
当記事ではその方法をデモを交えながら解説します。

①通常のSwiperスライダーを作成
②CSSのみで矢印とドットを外に出す
③ドットだけ外に出したい場合は簡単
ソースコード全文

①通常のSwiperスライダーを作成

わかりやすいように、最初にReactで通常のSwiperスライダーを作成して、そこから変更を加えていきます。

npm i swiper@8

import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination, Autoplay]}
            navigation
            pagination
            loop={true}
            autoplay={{ delay:2000 }}
        >
            <SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
            <SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
            <SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
        </Swiper>
    )
}

.sample-slider {
    width: 70%;
}
.sample-slider img {
    width: 100%;
}

通常のSwiperスライダーができました。

②CSSのみで矢印とドットを外に出す

少し記述は多くなりますが、CSSのみで矢印とドットを外に出すことができます。
考え方としては、positionプロパティの代わりにgridプロパティで、矢印とドットの位置を定義します。
矢印とドットにはposition:absoluteが付いたままなので、overflow:hiddenの対象外となり、はみ出して表示することができます。

.sample-slider {
  position: static!important;
  display: grid!important;
}
.sample-slider [class^="swiper-button-"]{
  inset: initial;
  margin: 0;
  align-self: center;
}
.sample-slider .swiper-button-prev{
  justify-self: start;
  margin-left: -40px;
}
.sample-slider .swiper-button-next{
  justify-self: end;
  margin-right: -40px;
}
.sample-slider .swiper-pagination{
  inset: initial!important;
  align-self: end;
  justify-self: center;
  margin-bottom: -40px;
}

矢印とドットを外に出すことができました。

③ドットだけ外に出したい場合は簡単

補足になりますが、ドットだけ外に出したい場合はとても簡単で以下のようにpaddingを上下にとるだけでOKです。

.sample-slider {
    padding: 40px 0!important;
}

ソースコード全文

最後にソースコードを全文載せておきます。

npm i swiper@8

import { Swiper, SwiperSlide } from 'swiper/react'
import { Navigation, Pagination, Autoplay} from 'swiper'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css'
import './style.css'

export default function SampleSlider() {
    return (
        <Swiper
            className="sample-slider"
            modules={[Navigation, Pagination, Autoplay]}
            navigation
            pagination
            loop={true}
            autoplay={{ delay:2000 }}
        >
            <SwiperSlide><img src="/img/sample1.png" /></SwiperSlide>
            <SwiperSlide><img src="/img/sample2.png" /></SwiperSlide>
            <SwiperSlide><img src="/img/sample3.png" /></SwiperSlide>
        </Swiper>
    )
}

.sample-slider {
  width: 70%;
  position: static!important;
  display: grid!important;
}
.sample-slider [class^="swiper-button-"]{
  inset: initial;
  margin: 0;
  align-self: center;
}
.sample-slider .swiper-button-prev{
  justify-self: start;
  margin-left: -40px;
}
.sample-slider .swiper-button-next{
  justify-self: end;
  margin-right: -40px;
}
.sample-slider .swiper-pagination{
  inset: initial!important;
  align-self: end;
  justify-self: center;
  margin-bottom: -40px;
}
.sample-slider img {
    width: 100%;
}

以上、Swiper×Reactで作成したスライダーの矢印とドットを外に出す方法でした。