расположить точки в ряд
Не получается, хотя на другом слайдере всё получилось.
/* Слайдер */
.slick-slider {
position: relative;
padding: 0 50px;
}
/* Слайдер запущен */
.slick-slider.slick-initialized {
}
/* Слайдер с точками */
.slick-slider.slick-dotted {
}
/* Ограничивающая оболочка */
.slick-list {
overflow: hidden;
max-width: 440px;
// width: 585px;
}
/* Лента слайдов */
.slick-track {
display: flex;
// align-items: center;
// text-align: center;
// min-height: 252px;
}
/* Слайд */
.slick-slide {
}
/* Слайд активный (показывается) */
.slick-slide.slick-active {
}
/* Слайд основной */
.slick-slide.slick-current {
}
/* Слайд по центру */
.slick-slide.slick-center {
}
/* Клонированный слайд */
.slick-slide.slick-cloned {
}
/* Стрелка */
.slick-arrow {
position: absolute;
top: 50px;
z-index: 10;
font-size: 0;
width: 30px;
height: 60px;
border: 0;
}
/* Стрелка влево */
.slick-arrow.slick-prev {
left: 0;
background: url("../img/sl-arrow_l.svg") 0 0 / 100% no-repeat;
}
/* Стрелка вправо */
.slick-arrow.slick-next {
right: 0;
background: url("../img/sl-arrow_r.svg") 0 0 / 100% no-repeat;
}
/* Стрелка не активная */
.slick-arrow.slick-disabled {
}
/* Точки (булиты) */
.slick-dots {
}
.slick-dots li {
list-style: none;
margin: 0 10px;
}
/* Активная точка */
.slick-dots li.slick-active button {
background-color: #71f6eb;
}
/* Элемент точки */
.slick-dots li button {
width: 10px;
height: 10px;
display: inline-flex;
margin: 0 auto;
font-size: 0;
background-color: #d0d0d0;
border-radius: 35%;
border: 0;
}
}
.wps__item {
}
.wps__photo {
}
.reviews__text-items {
display: flex;
flex: 0 0 666px;
}
.reviews__text-slider {
}
.wts {
background-color: #eaebed;
padding: 90px 80px 0 80px;
}
.wts {
}
.wts__title {
font-size: 20px;
margin-bottom: 30px;
}
.wts__sub-title {
font-weight: bold;
color: #858585;
font-size: 16px;
}
.wts__text {
margin-bottom: 32px;
}
.wts__starts {
.wts__star {
}
}
.reviews__button {
width: 55px;
height: 50px;
position: relative;
top: 30px;
left: 685px;
border: 0;
cursor: pointer;
background: #fff url("../img/reviews/l.png") no-repeat center;
margin: 0 30px 120px 0;
&_aqua {
background: #71f6eb url("../img/reviews/r.png") no-repeat center;
}
&:last-child {
margin: 0;
}
<div class="reviews__photo-slider wps">
<div class="wps__item"><img src="img/reviews/01.png" alt="" class="wps__photo"></div>
<div class="wps__item"><img src="img/reviews/01.png" alt="" class="wps__photo"></div>
<div class="wps__item"><img src="img/reviews/01.png" alt="" class="wps__photo"></div>
<div class="wps__item"><img src="img/reviews/01.png" alt="" class="wps__photo"></div>
</div>
