Почему слайдер скролит при клике на кнопки внутри карточки

Есть вот такой Слайдер.

<div class="clinic__doctors">
<h2 class="clinic__doctors-title">{% trans 'НАШИ ВРАЧИ' %}</h2>
<!-- Swiper -->
<div
    class="swiper clinic__doctors-swiper"
    style="overflow: hidden; padding: 20px"
>
    <div class="swiper-wrapper">
        {% for doctor in doctors %}
        <div class="swiper-slide">
            <div class="clinic__doctors-card">
                <img
                    class="clinic__doctors-card-img"
                    src="{% static 'clinic/img/doctor.png' %}"
                    alt=""
                />
                <p class="clinic__doctors-card-name">
                    <span>{{ doctor.get_fullname_as_dict.surname }}</span><br />{{
                    doctor.get_fullname_as_dict.name }}
                </p>
                <hr />
                <p class="clinic__doctors-card-job">{{ doctor.speciality }}</p>
                <p class="clinic__doctors-card-experience">
                    {% trans '23 года опыта работы' %}
                </p>
                <a href="#" class="clinic__doctors-card-link"
                    >{% trans 'Подробнее' %}</a
                >
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="clinic__doctors-controls">
        <div
            class="clinic__doctors-swiper-button clinic__doctors-swiper-button-prev"
        >
            <img src="{% static 'clinic/img/prev.svg' %}" alt="" />
        </div>
        <div
            class="clinic__doctors-swiper-button clinic__doctors-swiper-button-next"
        >
            <img src="{% static 'clinic/img/next.svg' %}" alt="" />
        </div>
    </div>
</div>

С такими настройками:

let DoctorsSwiper = new Swiper(".clinic__doctors-swiper", {
        slidesPerView: 1,
        spaceBetween: 37,
        allowTouchMove: false,
        navigation: {
            nextEl: ".clinic__doctors-swiper-button-next",
            prevEl: ".clinic__doctors-swiper-button-prev",
        },
        breakpoints: {
            1024: {
                slidesPerView: 3,
            },
            767: {
                slidesPerView: 2,
            }
        }
    });

В слайдере есть карточки у которых есть кнопки. При клике на кнопку, почему то листается весь слайдер, почему?

Видео-пример