i want to create carousel but when i click next or previous page it replace data of the current index in a second and go next page and show white and nothing i dont know js a lot and i cant figure it out if you can help me with this 😉

<div class="container">
    <div class="custom-carousel">
        <div class="carousel-inner">
            <?php foreach ($topic as $index => $model): ?>
                <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
                    <div class="community-box col-md-2">
                        <article class="community-item blog-item">
                            <div class="item">
                                <div class="image-wrapper">
                                    <div class="image-frame">
                                        <figure>
                                            <?php if ($model->hasFile('image')) : ?>
                                                <?= Html::a(
                                                    Html::img(
                                                        $model->getFile('image')->getUrl('gridview-thumb'),
                                                        [
                                                            "alt" => he($model->title),
                                                            "preset" => "gridview-thumb",
                                                            "class" => "card-image"
                                                        ]
                                                    ),
                                                    [
                                                        '/community/front/view',
                                                        'id' => $model->id,
                                                        'title' => he($model->title)
                                                    ],
                                                    [
                                                        'class' => ''
                                                    ]
                                                );?>
                                            <?php endif; ?>
                                        </figure>
                                    </div>
                                </div>
                                <div class="item-content">
                                    <h3 class="card-title">
                                        <?= Html::a(
                                            he($model->title),
                                            [
                                                '/community/front/view',
                                                'id' => $model->id,
                                                'title' => he($model->title)
                                            ]
                                        ); ?>
                                    </h3>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <button class="carousel-control-prev" onclick="prevSlide()">❮</button>
        <button class="carousel-control-next" onclick="nextSlide()">❯</button>
    </div>
</div>

my js :

let currentIndex = 0;

function showSlide(index) {
    const slides = document.querySelectorAll('.carousel-item');
    const totalSlides = slides.length;

    currentIndex = (index + totalSlides) % totalSlides;

    slides.forEach((slide, i) => {
        if (i === currentIndex) {
            slide.classList.add('active');
        } else {
            slide.classList.remove('active');
        }
    });

    const offset = -currentIndex * 100;
    document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
}

function nextSlide() {
    currentIndex++;
    showSlide(currentIndex);
}

function prevSlide() {
    currentIndex--;
    showSlide(currentIndex);
}


showSlide(currentIndex);

please fix it funcionally that when i click next page or previous it go there and show 4 new index