Swiperの設定方法を教えてください（paginationを画像の外に出したい。navigationを表示させたい）

Question

Swiperの設定についてご教示お願いします。

したい事
①Swiperのデフォルトのナビゲーションボタンが表示されないので、これを表示させたい。
②paginationのボタンがデフォルトだと画像の中に表示されているが、これを画像の外の下側に移動させたい。

Swiperの使い方等調べたのですが見つける事ができませんでした。
よろしくお願いいたします。

現在のコードは下記となります。

<div class="swiper-container mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="画像のパス" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="画像のパス" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="画像のパス" alt="" />
              </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>

.swiper-container {
  height: 100%;
  width: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  top: 50px;
}

$(function () {
  var swiper = new Swiper(".mySwiper", {
    effect: "fade",
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
});

Answer 1

①Swiperのデフォルトのナビゲーションボタンが表示されないので、これを表示させたい。

上記のコードを私の環境で再現したところ、ナビゲーションバーボタンは下記画像のように表示されていました。(位置がスタイルにより上部によっていたので、top:50pxは消しています。)

他に別のスタイルがあたってしまっていたりはしないでしょうか？あるいは、この構造より外側が影響していたりする可能性もあるかなと思いました。

②paginationのボタンがデフォルトだと画像の中に表示されているが、これを画像の外の下側に移動させたい。

こちらについてはCSSで対応可能です。
もともとついているposition: absolute;を打ち消す形でスタイルを上書きすれば下側に表示させることができます。(あるいは、topやbottomで下に移動させることでも対応できます。)

.swiper-container .swiper-pagination {
            position:static;
        }