【Cording】Swiperのスライドを真ん中に

閲覧していただきありがとうございます。

この記事はSwiperでスライダーを実装中、コンテンツ画像を中央に置きたいけどレスポンシブ時にずれてしまう問題を解消した方法を載せています。

といった問題を解消します。

Swiperのスライドを真ん中に置く方法

オリジナルのコードにコードを追加します。

オリジナルは以下のコード

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>

これだと個別のスライドごとの設定が難しいので以下のようにslide_boxを入れます。

 <div class="swiper">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide slide1">
                        <div class="slide_box">
                            <img src="images">
                            <div class="slide_txt_wrapper">
                                <p class="slide_box_ttl">テキスト</p>
                                <p>テキスト</p>
                            </div><!-- /.slide_txt_wrapper-->
                        </div><!-- /.slide_box-->
                    </div><!-- /.slide_slide-->

このslide_boxを装飾することでswiper-slideそのもののズレを防ぎます。

私は当初、ここにpadding等で位置を修正しようとしたためレスポンシブに対応できず画面サイズごとに設定することになり上手くいきませんでした。

スライドを中央に置く場合は、以下の赤い部分のコードをswiper.jsの中に記述します。

const swiper = new Swiper('.swiper', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
    autoplay: {
        delay: 5000,
    }, // 0=途切れなくループ 1000=1秒
    spaceBetween: 0,// スライド同士の間隔（20pxなら20）
    speed: 6000,// スライドの速さ
    centeredSlides: true,// スライドをセンターに
    slidesPerView: 1.0,
    breakpoints: {
        // スライドの表示枚数：500px以上の場合
        500: {