Swiper×Reactで作成したスライダーのナビゲーション（矢印）とページネーション（ドット）をスライドの外に配置したい時があると思います。
当記事ではその方法をデモを交えながら解説します。
①通常のSwiperスライダーを作成
わかりやすいように、最初にReactで通常のSwiperスライダーを作成して、そこから変更を加えていきます。
npm i swiper@8import { 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@8import { 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で作成したスライダーの矢印とドットを外に出す方法でした。
