Swiperを使ってスライダーを設置したとき、どうしても中央で表示されずに少しずれることがありました。実現したかったのは、めちゃシンプルな写真のスライドです。
よくやる写真（画像）に対してwidth:100%、height:100%、ついでにobject-fit:coverで、全ての写真のサイズが同じになり、スライドや写真の横幅も親要素と一致。
なのに、微妙に次のスライド（左側）の一部が常に顔を出すようなずれ方をする。という症状でした。
結論、私の場合は、スライドのラッパー（.swiper-wrapper）に<ul>要素を使い、各スライド（.swiper-slide）に<li>を使っていたことが原因でした。
正確に言うと、この<ul>にデフォルトで設定されるpadding-leftが生きたままになっており、この分のズレという結末でした。
つまり、<ul>のpaddingを0にしてあげることで解決！あと隠れてはいましたがリストにつく「・」も当然いらないので、list-style:noneしてやればキレイかと思います。
そもそも<ul>ではなく<div>を使えば問題なさそうですね…
自作で色々カスタマイズしていたので、そういうこともあるよね…という話題でした。
以下は、余談です。
今回、この問題で結構つまずいて半日費やしてしまいました…検索して調べようとしてもおよそ「centeredSlides: true」で中央にくるよ！という紹介がヒットするばかりで、いやいやそんなんとっくに試してるよ～涙
という状況でした。私が原因を見つけるきっかけになったのが、やはり開発ツールですね。要素の周りを手当たり次第確認して手がかりを探していたところ、<li>属性の中に「:marker」なんてものを発見！
フォーカスしてみると、なんとなく写真がずれている部分にいるような気配を感じました。そこでようやくlist-styleの存在に意識が向かい、<ul>のパディングじゃね？ということに気づきました。
結果がわかれば案外初歩的なことだったのですが、機能としてライブラリを使わせていただく場合は、原因の問題がスクリプトなのか、CSSなのか、判断が難しいとこです。特に色々と手の込んだカスタマイズで自作要素が大きくなってくると、ネットで検索しても手がかりは見つかりにくいですしね。
それでは、素敵なWeb製作の参考になれば幸いです♪
