Не работает раскрытие текста при смене слайда Slider Swiper

пытаюсь реализовать слайдер с отзывами и т.к. объём текста в отзывах разный, изначально скрываю часть текста и при нажатии на span "Читать больше" должен показываться остальной текст. Все вроде бы хорошо, но при смене слайда перестает работать моя функция раскрытия текста(не работает не на первом, не на последующих слайдах). Я только учусь и пока не удалось найти решение этой проблемы. Помогите чем можете))

HTML

            <div class="response__items swiper-container">
                <div class="swiper-wrapper">
                    <div class="response__item swiper-slide">
                        <div class="response__image"><img src="img/response/02.png" alt="response"></div>
                        <h2 class="response__studentname title">Дарья</h2>
                        <h3 class="response__subtitle subtitle">взрослые, starter</h3>
                        <p class="response__text text">
                            Меня всё устраивает, всё нравится. Для меня то, что надо. Я никогда английский не учила. Мне
                            всё ясно, понятно, интересно<span class="readmore active">... <span class="readmore-color">
                                    Читать больше</span>
                            </span>
                            <span class="more noactive">. Преподаватель как-то доступно объясняет. За полгода занятий
                                результат есть. Я стала ездить за границу, уже могу сказать что-то, понимаю. Прогресс
                                есть, конечно. Мы больше нацелены на разговорный язык, но она преподаёт и как грамотно
                                это делать. Всё, что нужно! </span><span class="readless noactive"> Скрыть </span>
                        </p>

                    </div>
                    <div class="response__item swiper-slide">
                        <div class="response__image"><img src="img/response/02.png" alt="response"></div>
                        <h2 class="response__studentname title">Екатерина</h2>
                        <h3 class="response__subtitle subtitle">детское обучение</h3>
                        <p class="response__text text">
                            Елена Александровна занимается с двумя детьми сразу. Дочка еще в школу не ходит, и педагог
                            подбирает для занятий с ней индивидуальную<span class="readmore active">...
                                <span class="readmore-color"> Читать больше</span> </span> <span class="more noactive">,
                                интересную программу. А сын в пятом классе,
                                с ним преподаватель изучает английский более глубоко, чем школьная программа. Оба
                                ребенка искренне любят преподавателя, с удовольствием занимаются. Она пунктуальна и
                                ответственна. Мы довольны.<span class="readless noactive"> Скрыть </span>
                        </p>

                    </div>
                    
                </div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>

CSS

.response__item {
    padding: 0px 80px 0px 80px;
    @media (max-width:($md3+px)) {
        padding: 0px 10px 0px 10px;
    };
    .active{
        display: contents;
    };
    .noactive{
        display: none;
    }
    .readmore-color{
        color: #976a4e;
    }
    .readless{
        color: #976a4e;
    }
}

JS app

new Swiper('.response__items', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true,
    },
    grabCursor: true,
    keyboard: {
        enabled: true,
        onlyInViewport: true,
        pageUpDown: true,
    },
    loop: true,
    //autoHeight: true,
    // autoplay: {
    //     delay: 5000,
    // },
    speed: 800,
    effect: 'fade',
    fadeEffect: {
        crossFade: true,
    },
});

// Подключение файла readmore
import * as readmore from "./readmore.js";
readmore.readmore_function();
readmore.readless_function();
// Подключение файла readmore

JS readmove

// Функция "Читать больше-меньше"
var moreText = document.querySelector(".more");
var readmore = document.querySelector(".readmore");
var readless = document.querySelector(".readless");

export function readmore_function() {
    readmore.onclick = function () {
        readmore.classList.add('noactive');
        moreText.classList.add('active');
        readless.classList.add('active');
        readmore.classList.remove('active');
        moreText.classList.remove('noactive');
        readless.classList.remove('noactive');
    }
};
export function readless_function() {
    readless.onclick = function () {
        readmore.classList.add('active');
        moreText.classList.add('noactive');
        readless.classList.add('noactive');
        readmore.classList.remove('noactive');
        moreText.classList.remove('active');
        readless.classList.remove('active');
    }
};
// Функция "Читать больше-меньше"