swiper.js スマホ表示の時にスライダーがズレてしまう。

Question

前提・実現したいこと

スマホ表示の時にスライダーの表示が右にズレてしまうのを修正。
中途半端なポジションからスライドが始まっており、左に違うスライダーが見切れてしまっている。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

 <section id="print">
        <div class="inner_wrap">
  <div class="item_list">
        <div class="swiper">
        <p>Black</p>
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img alt="" src="/img/01/pants_black.jpg"></div>
            <div class="swiper-slide"><img alt="" src="/img/01/pants_black_2.jpg"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>


<div class="item_list">
    <div class="swiper">
        <p>Grey</p>
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img alt="" src="/img/01/pants_grey.jpg"></div>
            <div class="swiper-slide"><img alt="" src="/img/01/pants_grey_2.jpg"></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div> 
</div>   
</section>

 <section id="border_pants">
     <div class="inner_wrap">

   <div class="item_list">
        <div class="swiper">
    <p>Black</p>
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img alt="" src="/img/02/hood_black.jpg"></div>
        <div class="swiper-slide"><img alt="" src="/img/02/hood_black_2.jpg"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
</div>



<div class="item_list">
    <div class="swiper">
    <p>Grey</p>
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img alt="" src="/img/02/hood_grey.jpg"></div>
        <div class="swiper-slide"><img alt="" src="/img/02/hood_grey_4.jpg"></div>
        <div class="swiper-slide"><img alt="" src="/img/02/hood_grey_3.jpg"></div>
        <div class="swiper-slide"><img alt="" src="/img/02/hood_grey_2.jpg"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
</div>
</div>


</section>

@charset "UTF-8";

.swiper {
    width: 1000px;
    height: 680px;
    width: 100%;
    max-width: 500px !important;
    margin: 40px auto !important;
    /* overflow: visible !important; */
    padding-bottom: 30px;
}

.swiper-pagination {
    width: 10px;
    height: 10px;
}

.item_list {
position: relative;
}
.item_list p{
    position: absolute;
    top: 0;
    left: -5px;
    letter-spacing: .04em;
    writing-mode: vertical-rl;
    font-size: 17px;
    display: block;
    margin: 0 0 0px;
    text-align: left;
    font-weight: 500;
    color: #0d001e;
    font-family: 'Roboto', sans-serif;
    z-index: 99;
}

@media screen and  (min-width:896px){
}
@media screen and (min-width:769px){
}
/*<<<--max896px------*/
@media screen and (max-width: 896px){

 .swiper {
        width: 1000px;
        height: 500px;
        width: 100%;
        max-width: 500px !important;
        margin: 40px auto !important;
        /* overflow: visible !important; */
        padding-bottom: 30px;
    }
    
    .swiper-pagination {
        width: 10px;
        height: 10px;
    }
    
    .swiper-wrapper {
        width: 90%;
        margin: 12px auto;
    }
.item{
        display: block;
    }
 .item_list p{
        font-size: 14px;
        left: 4px;
        top: 12px;
.swiper-slide{
        margin: 0 10px;
    }

const swiper = new Swiper('.swiper', {
  // Optional parameters
  // direction: 'vertical',
  centeredSlides: true,
  loop: true,
  autoplay:{
    delay: 2000
  },
  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },

  breakpoints: {
		767: {
			slidesPerView: 1,
			spaceBetween: 10
		}
	}
  
});

試したこと

試行錯誤したのですが、初心者なのでどこを調整していいかわかりません。

補足情報（FW/ツールのバージョンなど）

Swiper.js v7.0.9

Answer 1

swiper.js 同一ページ内に複数のスライダーを配置し、全て同じ動きにしたい

「swiper.js 同一ページ内に複数のスライダーを配置し、全て同じ動きに」でググると、1番目に表示されたページがこちらでした。参考にされてはいかがでしょうか。

複数のスライダーを設置してすべて同じ動きにする | 【Swiper】同一ページ内に複数のスライダーを設置する方法｜Into the Program

---

コメントを受けて追記

2段目からpaginationが表示されないのを一段目と同様に表示

.swiper-pagination を置くところが違うのが原因だと思います。.swiper-wrapper との位置関係を確認してみて下さい。

---

中途半端なポジションからスライドが始まっており、左に違うスライダーが見切れてしまっている

問題が再現しませんでした。
ご提示いただいていない部分に原因があるのかもしれません。

Comments

[KOI02]

実は既に拝見していたのですが、どこのコード差異があるのか分からず数時間です。。。

[Lhankor_Mhy]

「swiper.js 同一ページ内に複数のスライダーを配置し、全て同じ動きにしたい」という問題は解消していて、その他の問題が解消していないということですか？

[KOI02]

スライダー自体は同時にスライドはするものの、セクション２のpaginationが表示されていない状態です。
また、スマホの状態ですと写真が切れて(ズレて)表示されてしまっています。

[Lhankor_Mhy]

「前提・実現したいこと」のうち1行目がすでに解消していて、2行目以降の問題が解消していないということですね。質問をご編集なさることをおすすめします。

[Lhankor_Mhy]

追記しました。

[KOI02]

２段目paginationは仰る通り場所が違っていたようです。本当にありがとうございます！！

//問題が再現しませんでした。
ご提示いただいていない部分に原因があるのかもしれません。//

こちらどこをご提示していいかもわからないのですが、どういった可能性がありますでしょうか。
早急に解決したく考えております。

[Lhankor_Mhy]

CSSじゃないかな、という気がします。

---

>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。

https://teratail.com/help/question-tips#questionTips3-5-1

「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？

①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。
②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。 以下、①に戻って別の部分を削除するを繰り返す。
③　①で問題が再現するのであればフッターは関係ないので「現象を再現するための、より小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。

[KOI02]

ありがとうございます。試してみます！！