Почему не работает навигация swiper js?

Question

[suprascapularis69]

Здравствуйте, не могу понять почему не переключаются слайды в последнем блоке, добавленные с помощью библиотеки swiper js.

https://suprascapularis69.github.io/task4/

HTML блока

<div class="reviews">
            <h2 class="reviews-heading">What Our Customers About Us saying</h2>
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                                
                            </div>
                        </div>
                        <img src="images/people1.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                                
                            </div>
                        </div>
                        <img src="images/people2.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                                
                            </div>
                        </div>
                        <img src="images/people3.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                            </div>
                        </div>
                        <img src="images/people4.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                                
                            </div>
                        </div>
                        <img src="images/people5.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">
                                
                            </div>
                        </div>
                        <img src="images/people6.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-text">
                            <p class="slide-review">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularis</p>
                            <span class="slide-people-name">Ahmed Hridoy</span>
                            <div class="slide-nav">
                                <img src="images/grade.png" alt="Grade" class="slide-nav__grade">  
                            </div>
                        </div>
                        <img src="images/people7.png" alt="Ahmed Hridoy" class="slide-photo">
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>

scss блока

.reviews {
    @include wrapper;
    padding-top: 137px;
    min-height: 637px;
    position: relative;
}

.reviews-heading {
    max-width: 640px;
    min-height: 180px;
    font-family: "Rosario";
    @include font-style(70px, 700, 90px, $font-color);
    margin-bottom: 30px;
    position: absolute;
    top: 96px;
    left: 100px;
}

.swiper {
    position: relative;
}

.swiper-slide {
    @include flex;
    align-items: flex-end;
}

.slide-text {
    padding-bottom: 32px;
}

.slide-review {
    max-width: 586px;
    min-height: 180px;
    @include font-style(18px, 400, 30px, #555555);
    margin-bottom: 40px;
}

.slide-people-name {
    min-height: 36px;
    @include font-style(30px, 500, 36px, $font-color);
    margin-bottom: 20px;
}

.slide-nav {
    max-width: 465px;
    @include flex;
}

.swiper-button-prev,
.swiper-button-next {
    width: 56px;
    height: 56px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: #09A66D;
    color: #ffffff;
    position: absolute;
}

.swiper-button-prev {
    left: 427px;
    bottom: 15px;
}

.swiper-button-next {
    left: 510px;
    bottom: 15px;
}

.slide-photo {
    max-width: 500px;
    min-height: 500px;
    object-fit: cover;
}

подключение swiper

var swiper = new Swiper('.swiper', {
    // Install Plugin To Swiper
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
});

Answer 1

[Максим Морев]

Если откроете консоль, то обнаружите там ошибку
Uncaught ReferenceError: Swiper is not defined

В вашем случае вам надо поменять местами скрипты, где вы подключаете файлы.
Сначала swiper-bundle, потом вам инициализатор.