Здравствуйте. Не могу понять, в чём ошибка в коде. Не видны кнопки навигации, на попытки отпозиционировать их никак не реагируют. 2 других слайдера работают нормально, а этот не хочет.
Код прилагаю.
<div class="reviews__slider">
<div class="carousel">
<div class="carousel-item">
<blockquote>
Lorem Ipsum
</blockquote>
<div class="carousel__footer">
<img src="img/reviews__slider.png" alt="Клиент">
<div class="carousel__footer-text">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div>
</div>
.reviews__slider {
position: relative;
}
.carousel {
background: #EBEBEB;
padding: 45px 95px;
}
.carousel-item {
}
.carousel-item blockquote {
font-style: normal;
font-weight: 300;
font-size: 18px;
line-height: 25px;
}
.carousel__footer {
max-width: 340px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 58px;
}
.carousel__footer-text h6 {
font-style: normal;
font-weight: 900;
font-size: 18px;
line-height: 25px;
}
.carousel__footer-text p {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #4F4F4F;
}
$(document).ready(function () {
$('.reviews__slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
responsive: [{
breakpoint: 850,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
}
}]
});
});