Swiper проблема со слайдами

new Swiper('.companies__slider', {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    slidesPerView: 4,
    spaceBetween: 25,
    slidesPerGroup: 3,
});
    &__slider {
    }

    &__slide {
    }

    &__img {
        padding: 24px;
        border: 2px solid #efefef;
        border-radius: 20px;
    }
    .swiper-wrapper{
        
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: -3750px;
        left: 0px;
        width: 100%;
    }
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #3b3b3b;
    }
    .swiper-pagination-bullet-active{
        background: #686868;
    }
<div class="companies__slider swiper-container">
                    <div class="companies__wrapper swiper-wrapper">
                        <div class="companies__slide swiper-slide"><img src="./images/companies/aputure.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/artisans.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/boling.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/cww.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/deity.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/feeeword.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/godox.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/nikon.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/portkeys.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/sirui.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/sony.jpg" alt="#"
                                class="companies__img"></div>
                        <div class="companies__slide swiper-slide"><img src="./images/companies/synco.jpg" alt="#"
                                class="companies__img"></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
}
.swiper-pagination {
}

я установил чтобы в слайдере Swiper выводилось только 4 слайда но видно еще и кусок 5 слайда а если перелестнуть то и первый слайдер виднеется

вот сайт - https://serega240805.github.io/shop/ там ниже слайдер

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Александр Сычёв

Например: к классу .container добавьте еще класс со значением .class: {overflow: hidden;}

Должно получится так:

введите сюда описание изображения

→ Ссылка