Почему слайдер Swiper не прячет свои неактивные элементы?

Question

[Нікіта]

Что я мог сделать не так или какие свойства написано не правильно, что слайдер Swiper отображает неактивные слайды за станицей.

<div class="reviews" id="rev">
        <div class="container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="reviews__item" title="Этот отзыв взят с профиля Freelance.ua">
                            <div class="reviews__text">
                                <p>Ответственный, последовательный, коммуникабельный разработчик.<br>Рекомендую</p>
                            </div>
                            <div class="reviews__author">
                                <img class="reviews__photo" src="assets/img/ferdi.png" alt="author">
                                <div class="reviews__name">Bohdan</div>
                                <div class="reviews__company">Customer</div>
                                <div class="reviews__rating">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <!-- <img class="reviews__star--unactive" src="assets/img/star.png" width="13px" height="13px" alt="star"> -->

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="reviews__item" title="Этот отзыв взят с профиля Freelance.ua">
                            <div class="reviews__text">
                                <p>Быстро, качественно, без предоплат. Работать можно без проблем.<br>Рекомендую!</p>
                            </div>
                            <div class="reviews__author">
                                <img class="reviews__photo" src="assets/img/ferdi.png" alt="author">
                                <div class="reviews__name">Спартак</div>
                                <div class="reviews__company">Customer</div>
                                <div class="reviews__rating">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <img class="reviews__star" src="assets/img/star.png" width="13px" height="13px" alt="star">
                                    <!-- <img class="reviews__star--unactive" src="assets/img/star.png" width="13px" height="13px" alt="star"> -->

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

$(function() {
    const swiper = new Swiper('.swiper-container', {
        autoHeight: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
});

https://nikita17-cod.github.io/Portfolio/

Answer 1

[Nikolay Matyushkin]

Вы должны какому-то из ближайших родительских элементов присвоить стиль
overflow: hidden
В вашем случае для блока с классом reviews

Comments

[Нікіта]

Спасибо, сейчас проверю