swiper-pagination が下にずれてしまう

Question

前提・実現したいこと

swiperでスライダーをコーディングしています。
テンプレート通りコードを打ち込んでいるのですが
ページネーションボタンの位置がスライダー外の
下の方にずれてしまっています。

スライダーの中に配置するにはどうすればよいでしょうか。
アドバイスの程宜しくお願いします。

該当のソースコード

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <div id="app"> <div class="swiper-container slider1"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/t1.jpg" alt="" style="padding-top: 25vw;"></div> <div class="swiper-slide"><img src="images/t2.jpg" alt="" style="padding-top: 25vw;"></div> <div class="swiper-slide"><img src="images/t3.jpg" alt="" style="padding-top: 25vw;"></div> <div class="swiper-slide"><img src="images/t4.jpg" alt="" style="padding-top: 25vw;"></div> <div class="swiper-slide"><img src="images/t5.jpg" alt="" style="padding-top: 25vw;"></div> </div> <div class="swiper-pagination swiper-pagination-white"></div> </div> </div> <script> let slider1 = new Swiper ('.slider1', { // 以下にオプションを設定 loop: true, //最後に達したら先頭に戻る //ページネーション表示の設定 pagination: { el: '.swiper-pagination', //ページネーションの要素 type: 'bullets', //ページネーションの種類 clickable: true, //クリックに反応させる }, autoplay: { //自動再生を有効に delay: 4000, }, }) </script>

CSS

#app { display: none !important; }
#app {
display: block !important;
margin: auto;
}

@media (max-width: 800px) {
.pc { display: none !important; }
.sp { display: block !important; }
.swiper-container {
max-width: 100vw;
margin: 0 auto;
padding-bottom: 0;
}｝

Answer 1

単純にページネーションの位置を上に移動したいだけであれば

.swiper-pagination {
    bottom: 40px !important;
    /* 数値はちょうどよくなるよう変更してください。 */
}

で調整できると思います。

---

以下、質問と直接関係はしないため補足的に書かせていただきます。
余計な指摘でしたらスルーしてください。

まず、「swiper-bundle.css」の改行などを除いてサイズを小さくしたのが「swiper-bundle.min.css」なので、両方読み込む必要はありません。（jsも同様です）

また、
app { display: none !important; }
app {
display: block !important;
margin: auto;
}
の「app」はおそらくidだと思うので、「#app」としないとcssは効きません。
上記打ち消し線箇所は、Markdownによるものとのことなので消させていただきます。

あとはラストの「}」が全角になっているので、半角にした方が良さそうです。

Comments

[Lhankor_Mhy]

横からすみません。

# が抜けているように見えるのは、Markdown だと思います。行頭に # があると h1になるので。

[bonten.design]

なるほどです。。
「app{」がもれなく見出しになっていて不思議だなあと思っていました。

WEBLOGさん、失礼いたしました。

[WEBLOG]

bbQueenさん
ありがとうございます。
助かりました。