Мне нужно чтобы стрелки и пагинация выходила за рамки блока, дал абсолютную ширину и отступы, работает но при том случае когда дается .swiper-container overflow:visible; Но тут вылетают все блоки во всю ширину, надо как то их закрыть и чтоб пагинация и стрелки нормально смотрелись.
Это React Swiper
navigation
slidesPerView={3}
onSlideChange={() => console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
pagination={{ clickable: true }}
>
.swiper-pagination {
position: absolute;
bottom: -40px; // should be fine as is, but adjust to your liking
}
.swiper-button-prev{
background: url("../public/img/arrow-next.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
cursor: pointer;
position: absolute;
left:-40px;
}
.swiper-button-prev::after {
display: none;
}
.swiper-container{
overflow: visible;
}
.swiper-button-next{
background: url("../public/img/arrow-prev.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
cursor: pointer;
position: absolute;
right:-40px;
}
.swiper-pagination-bullet{
background-color:#000;
}
.swiper-pagination-bullet-active{
background-color:#fff;
}
.swiper-button-next::after{
display: none;
}