Почему не подключается Swiper slider?

Хочу подключить Swiper slider через CDN. Соответственно что бы сделать слайдер. Вот код HTML boody:

<div class="wrapper">
        <!-- слайдер -->
        <div class="image-slider swiper-container">
            <!-- обязательная оболочка -->
            <div class="image-slider__wrapper swiper-wrapper">
                <!-- слайд слайдера -->
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                        <img src="../image/DoomImage1.jpg">
                    </div>
                </div>
                <div class="image-slider__slide swiper-slide">
                    <div class="image-slider__image">
                    <img src="../image/DoomImage2.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- подключение файла js и подключение swiper. -->
    <script src="script.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

В head я подключил важный css файл Swiper:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css">

Сам я в слайдах сделал картинки по 700px ширины и высоты. В javascript пишу следующие:

// подключаю .image-slider к Swiper если не ошибаюсь. Что бы этот элемент стал слайдером
new Swiper('.image-slider');

Но в итоге у меня не чего не работает. Вот что пишет в Console: Uncaught ReferenceError: Swiper is not defined at script.js:2:16

В чем может быть проблема? Может я как то не правильно подключаю его? Вот ссылка на скачивание самого проекта: https://disk.yandex.ru/d/Auhudg02Qrd__w (Яндекс диск). Прошу помочь, делаю все ради учение.