swiperが動かない

swaiperの実装にて、一度動かなかったので、まず基本的な形で動かそうと試しているのですが、スライドしない状況です。
どこがおかしいのか数時間調べては試しているのですが、解決しないのでお力添えをお願いします。

該当のソースコード

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>practice</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide color-1"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> <div class="swiper-slide color-2"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> <div class="swiper-slide color-3"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> <div class="swiper-slide"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> <div class="swiper-slide"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> <div class="swiper-slide"> <img class="results-swipper_img" src="img/slide1.png" alt=""> <h2 class="results-swipper_heading">とかくに人の世は住みにくい。</h2> <p class="results-swipper_text">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。意地を通せば窮屈だ。</p> </div> </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
      <script type="text/javascript" src="js/style.js" defer></script>
</body>

</html>

【CSS】
.color-1{
background-color: red;
}
.color-2{
background-color: blueviolet;
}
.color-3{
background-color: blue;
}

【javaScript】
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

試したこと

javaScriptに関しては、検索したらswiper.jsのバージョンによって記載の仕方が違うとの記述があったので以下も試しました。
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});