Вроде и min-width: 0; уже куда можно вставляла, а свайпер всё равно растягивает мне страничку, не понимаю что делать..((
CSS
:
.reviews {
background-image: url(../img/bg_chapter-4.png);
padding: 181px 0 100px;
}
.reviews__header {
text-align: center;
}
.swiper3 {
margin-top: 239px;
}
.reviews__swiper-block {
display: flex;
min-width: 0;
}
.reviews__slide-block {
justify-content: center;
height: 296px;
display: flex;
gap: 42px;
background-color: var(--color-1);
width: 500px;
border-radius: 12px;
}
.reviews__slide-block img {
display: block;
}
.reviews__text-block {
margin: auto 0;
margin-right: 21px;
text-align: left;
color: var(--color-4);
line-height: 22px;
width: 745px;
}
.reviews__text-block p {
text-align: justify;
font-size: 8px;
font-family: 'LatoRegular', Arial, Helvetica, sans-serif;
}
.reviews__text-block h3 {
color: var(--color-4);
font-size: 17px;
font-family: 'LatoBold', Arial, Helvetica, sans-serif;
margin: 10px 0;
}
<div class="reviews">
<div class="container">
<div class="reviews__block">
<h3 class="reviews__header">Reviews</h3>
<div class="swiper3">
<div class="swiper-wrapper reviews__swiper-block">
<div class="swiper-slide reviews__slide-block">
<img src="https://cdn.nwmgroups.hu/s/img/i/1011/20101104gru3.jpg" alt="">
<div class="reviews__text-block">
<p>May 8, 2020</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus nibh mauris, nec
turpis
orci lectus maecenas. Suspendisse sed magna eget nibh in turpis. Consequat duis
diam
lacus arcu. Faucibus venenatis felis id augue sit cursus pellentesque enim arcu.
Elementum felis magna pretium in tincidunt. Suspendisse sed magna eget nibh in
turpis.
Consequat duis diam lacus arcu.Lorem ipsum dolor sit amet, consectetur
adipiscing
elit.
Cursus nibh mauris, nec turpis orci lectus maecenas. Suspendisse sed magna eget
nibh
in
turpis.</p>
</div>
</div>
<div class="swiper-slide reviews__slide-block">
<img src="https://img1.liveinternet.ru/images/attach/b/3/20/875/20875743_Moy_sosed_Totoro_1.jpg" alt="">
<div class="reviews__text-block">
<p>May 8, 2020</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus nibh mauris, nec
turpis
orci lectus maecenas. Suspendisse sed magna eget nibh in turpis. Consequat duis
diam
lacus arcu. Faucibus venenatis felis id augue sit cursus pellentesque enim arcu.
Elementum felis magna pretium in tincidunt. Suspendisse sed magna eget nibh in
turpis.
Consequat duis diam lacus arcu.Lorem ipsum dolor sit amet, consectetur
adipiscing
elit.
Cursus nibh mauris, nec turpis orci lectus maecenas. Suspendisse sed magna eget
nibh
in
turpis.</p>
</div>
</div>
<div class="swiper-slide reviews__slide-block">
<img src="https://cdn.nwmgroups.hu/s/img/i/1011/20101104gru3.jpg" alt="">
<div class="reviews__text-block">
<p>May 8, 2020</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus nibh mauris, nec
turpis
orci lectus maecenas. Suspendisse sed magna eget nibh in turpis. Consequat duis
diam
lacus arcu. Faucibus venenatis felis id augue sit cursus pellentesque enim arcu.
Elementum felis magna pretium in tincidunt. Suspendisse sed magna eget nibh in
turpis.
Consequat duis diam lacus arcu.Lorem ipsum dolor sit amet, consectetur
adipiscing
elit.
Cursus nibh mauris, nec turpis orci lectus maecenas. Suspendisse sed magna eget
nibh
in
turpis.</p>
</div>
</div>
<div class="swiper-slide reviews__slide-block">
<img src="https://img1.liveinternet.ru/images/attach/b/3/20/875/20875743_Moy_sosed_Totoro_1.jpg" alt="">
<div class="reviews__text-block">
<p>May 8, 2020</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus nibh mauris, nec
turpis
orci lectus maecenas. Suspendisse sed magna eget nibh in turpis. Consequat duis
diam
lacus arcu. Faucibus venenatis felis id augue sit cursus pellentesque enim arcu.
Elementum felis magna pretium in tincidunt. Suspendisse sed magna eget nibh in
turpis.
Consequat duis diam lacus arcu.Lorem ipsum dolor sit amet, consectetur
adipiscing
elit.
Cursus nibh mauris, nec turpis orci lectus maecenas. Suspendisse sed magna eget
nibh
in
turpis.</p>
</div>
</div>
<div class="swiper-slide reviews__slide-block">
<img src="https://cdn.nwmgroups.hu/s/img/i/1011/20101104gru3.jpg" alt="">
<div class="reviews__text-block">
<p>May 8, 2020</p>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus nibh mauris, nec
turpis
orci lectus maecenas. Suspendisse sed magna eget nibh in turpis. Consequat duis
diam
lacus arcu. Faucibus venenatis felis id augue sit cursus pellentesque enim arcu.
Elementum felis magna pretium in tincidunt. Suspendisse sed magna eget nibh in
turpis.
Consequat duis diam lacus arcu.Lorem ipsum dolor sit amet, consectetur
adipiscing
elit.
Cursus nibh mauris, nec turpis orci lectus maecenas. Suspendisse sed magna eget
nibh
in
turpis.</p>
</div>
</div>
</div>
<div class="swiper3-pagination"></div>
</div>
</div>
</div>
</div>
const swiper3 = new Swiper(".swiper3", {
slidesPerView: 2,
spaceBetween: 42,
pagination: {
el: ".swiper3-pagination",
clickable: true,
},
});
Средний
