swiper js не корректно выводит слайды
мне необходимо сделать слайдер на сайте, для этого я использовал библиотеку swiper js. В целом все получилось, но только почему то происходит не корректное отображение слайдов, то есть я хочу что бы показывалось 3 слайда, но вместо этого выводится 3 слайда - 2 отображаются нормально а 3 обрезан. подскажите пожалуйста что я сделал не так?
<section class="reviews__python">
<div class="container">
<div class="reviews__python_wrapper ">
<h2 class="reviews__python-title">Отзывы о курсе</h2>
<div class="reviews__python-blocks-block-arrow-left">
<img src="{% static 'image/course_python/reviews__python/arrow_left.png' %}" alt="">
</div>
<div class="slide-content">
<div class="reviews__python-blocks swiper-wrapper">
{% for review in reviews_dict %}
<div class=" reviews__python-blocks-block swiper-slide">
<div class="reviews__python-blocks-block-wrapper">
<div class="reviews__python-blocks-block-img">
{% if review.review.user.profile_picture %}
<img src="{{ review.review.user.profile_picture.url }}" alt="">
{% endif %}
</div>
<div class="reviews__python-blocks-block-info">
<div class="reviews__python-blocks-block-info-title">
{{ review.review.user.last_name }} {{ review.review.user.first_name }}
</div>
<div class="reviews__python-blocks-block-info-untitle">
Курс {{ review.review.course.course_name }}
</div>
<div class="reviews__python-blocks-block-info-stars">
<div class="reviews__block-autor-img-star_wrapper reviews__block-autor-img-star_wrapper-courses_python">
{% for review_rating_bool in review.review_rating_bool %}
{% if review_rating_bool %}
<div class="reviews__block-autor-img-star reviews__block-autor-img-star-active">
<i class="fa-solid fa-star"></i>
</div>
{% else %}
<div class="reviews__block-autor-img-star">
<i class="fa-solid fa-star"></i>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="reviews__python-blocks-block-text">{{ review.review.text }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="swiper-pagination"></div>
<div class="reviews__python-blocks-block-arrow-right">
<img src="{% static 'image/course_python/reviews__python/arrow_right.png' %}" alt="">
</div>
</div>
</div>
</section>
.reviews__python {
margin-top: 170px
}
.container {
padding: 0 75px;
max-width: 1700px;
margin: auto
}
.reviews__python_wrapper {
position: relative;
max: 1550px;
height: 780px;
border: 1px solid #FFFFFF;
border-radius: 72px
}
.reviews__python-title {
font-weight: 700;
font-size: 64px;
line-height: 78px;
text-align: center;
text-transform: uppercase;
margin-top: 35px;
color: #FFFFFF
}
.reviews__python-blocks-block-arrow-left {
position: absolute;
top: 345px;
left: -32px;
width: 65px;
height: 55px;
border-radius: 51.21px;
background-color: rgba(245, 245, 245, 0.68);
cursor: pointer;
transition: all .1s linear
}
.reviews__python-blocks-block-arrow-left:hover {
background-color: rgba(115, 153, 236, 0.7)
}
.reviews__python-blocks-block-arrow-left img {
position: relative;
top: 13px;
left: 16px
}
.reviews__python-blocks-block-arrow-right {
position: absolute;
top: 345px;
right: -32px;
width: 65px;
height: 55px;
border-radius: 51.21px;
background-color: rgba(245, 245, 245, 0.68);
cursor: pointer;
transition: all .1s linear
}
.reviews__python-blocks-block-arrow-right:hover {
background-color: rgba(115, 153, 236, 0.7)
}
.reviews__python-blocks-block-arrow-right img {
position: relative;
top: 13px;
left: 16px
}
.slide-content {
margin: 0 40px;
overflow: hidden;
border-radius: 25px;
}
.reviews__python-blocks {
display: flex;
justify-content: space-between;
margin: 100px 50px 0 50px
}
.reviews__python-blocks-block {
width: 450px;
height: 440px;
background-color: #85AEFF;
border-radius: 60px
}
.slide-content {
margin: 0 40px;
overflow: hidden;
border-radius: 25px;
}
.swiper-slide {
width: 440px;
}
Источник: Stack Overflow на русском