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;}
Должно получится так:

