Карусели
Карусель отзывов
Блок отзывов для сайта услуг, портфолио или лендинга. Часть карточек может быть только с текстом, часть — с фото результата, поэтому отзывы выглядят живее и не превращаются в одинаковые шаблонные блоки.
Отзывы
Разные отзывы в одной живой карусели
Текстовые отзывы, карточки с фото результата и короткие заметки собраны в одном блоке, который удобно смотреть на телефоне.
<section class="reviews-flow">
<div class="reviews-flow__head">
<span>Отзывы</span>
<h2>Разные отзывы в одной живой карусели</h2>
<p>
Текстовые отзывы, карточки с фото результата и короткие заметки
собраны в одном блоке, который удобно смотреть на телефоне.
</p>
</div>
<div class="reviews-flow__shell">
<button class="reviews-flow__arrow reviews-flow__arrow--prev" type="button">‹</button>
<div class="reviews-flow__viewport">
<div class="reviews-flow__track">
<article class="reviews-flow__card">
<div class="reviews-flow__top">
<strong>Анна</strong>
<span>★★★★★</span>
</div>
<p>
Всё объяснили спокойно и по делу. После консультации стало понятно,
какие шаги делать дальше.
</p>
<small>Консультация</small>
</article>
<article class="reviews-flow__card reviews-flow__card--photo">
<div class="reviews-flow__image">
<div class="reviews-flow__fake-photo">до / после</div>
</div>
<div class="reviews-flow__top">
<strong>Илья</strong>
<span>★★★★★</span>
</div>
<p>
Понравилось, что результат можно сразу показать в карточке.
Для услуг это выглядит убедительнее обычного текста.
</p>
<small>Фото результата</small>
</article>
<article class="reviews-flow__card reviews-flow__card--compact">
<div class="reviews-flow__top">
<strong>Мария</strong>
<span>★★★★☆</span>
</div>
<p>
Быстро, аккуратно, без лишней воды. Такой блок хорошо смотрится
на лендинге.
</p>
<small>Сайт услуг</small>
</article>
<article class="reviews-flow__card reviews-flow__card--photo">
<div class="reviews-flow__image reviews-flow__image--blue">
<div class="reviews-flow__fake-photo">проект</div>
</div>
<div class="reviews-flow__top">
<strong>Сергей</strong>
<span>★★★★★</span>
</div>
<p>
Удобно, что отзывы не одинаковые. Одни можно оставить текстом,
другие усилить изображением результата.
</p>
<small>Портфолио</small>
</article>
</div>
</div>
<button class="reviews-flow__arrow reviews-flow__arrow--next" type="button">›</button>
</div>
<div class="reviews-flow__dots"></div>
</section>.reviews-flow {
padding: 46px;
border-radius: 28px;
overflow: hidden;
background:
radial-gradient(circle at 12% 20%, rgba(59, 130, 246, 0.28), transparent 34%),
radial-gradient(circle at 88% 88%, rgba(236, 72, 153, 0.20), transparent 34%),
linear-gradient(135deg, #020617, #0f172a);
}
.reviews-flow__head {
max-width: 760px;
margin-bottom: 34px;
}
.reviews-flow__head span {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 13px;
border-radius: 999px;
color: #bfdbfe;
background: rgba(59, 130, 246, 0.16);
border: 1px solid rgba(96, 165, 250, 0.45);
font-size: 13px;
}
.reviews-flow__head h2 {
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(32px, 5vw, 56px);
line-height: 1.02;
letter-spacing: -0.05em;
}
.reviews-flow__head p {
color: #cbd5e1;
font-size: 17px;
line-height: 1.7;
}
.reviews-flow__shell {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
}
.reviews-flow__viewport {
overflow: hidden;
border-radius: 26px;
}
.reviews-flow__track {
display: flex;
gap: 18px;
transition: transform 0.45s ease;
}
.reviews-flow__card {
flex: 0 0 calc((100% - 36px) / 3);
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 24px;
background: rgba(15, 23, 42, 0.78);
box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}
.reviews-flow__card--compact {
min-height: 260px;
align-self: center;
}
.reviews-flow__top {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
margin-bottom: 18px;
}
.reviews-flow__top strong {
color: #ffffff;
font-size: 22px;
}
.reviews-flow__top span {
color: #facc15;
white-space: nowrap;
}
.reviews-flow__card p {
color: #dbeafe;
font-size: 17px;
line-height: 1.65;
}
.reviews-flow__card small {
color: #93c5fd;
}
.reviews-flow__image {
height: 130px;
display: grid;
place-items: center;
margin: -8px -8px 20px;
border-radius: 20px;
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 32%),
linear-gradient(135deg, #7c2d12, #be123c);
}
.reviews-flow__image--blue {
background:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 32%),
linear-gradient(135deg, #1d4ed8, #0f766e);
}
.reviews-flow__fake-photo {
border: 1px solid rgba(255, 255, 255, 0.36);
border-radius: 999px;
padding: 8px 14px;
color: #ffffff;
background: rgba(15, 23, 42, 0.45);
}
.reviews-flow__arrow {
width: 42px;
height: 42px;
border: 1px solid #334155;
border-radius: 50%;
color: #ffffff;
background: rgba(15, 23, 42, 0.78);
cursor: pointer;
font-size: 28px;
line-height: 1;
transition: 0.25s;
}
.reviews-flow__arrow:hover {
border-color: #3b82f6;
background: rgba(59, 130, 246, 0.22);
transform: translateY(-2px);
}
.reviews-flow__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 22px;
}
.reviews-flow__dots button {
width: 9px;
height: 9px;
border: 0;
border-radius: 999px;
background: #334155;
cursor: pointer;
transition: 0.25s;
}
.reviews-flow__dots button.active {
width: 28px;
background: #3b82f6;
}
@media (max-width: 991px) {
.reviews-flow__card {
flex-basis: calc((100% - 18px) / 2);
}
}
@media (max-width: 640px) {
.reviews-flow {
padding: 26px 18px;
}
.reviews-flow__shell {
grid-template-columns: 1fr;
}
.reviews-flow__arrow {
display: none;
}
.reviews-flow__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.reviews-flow__viewport::-webkit-scrollbar {
display: none;
}
.reviews-flow__track {
transform: none !important;
}
.reviews-flow__card {
flex-basis: 86%;
scroll-snap-align: start;
}
}const reviewsTrack = document.querySelector(".reviews-flow__track");
const reviewsCards = document.querySelectorAll(".reviews-flow__card");
const reviewsPrev = document.querySelector(".reviews-flow__arrow--prev");
const reviewsNext = document.querySelector(".reviews-flow__arrow--next");
const reviewsDots = document.querySelector(".reviews-flow__dots");
let reviewsIndex = 0;
function visibleCount() {
if (window.innerWidth <= 640) return 1;
if (window.innerWidth <= 991) return 2;
return 3;
}
function maxIndex() {
return Math.max(0, reviewsCards.length - visibleCount());
}
function renderDots() {
reviewsDots.innerHTML = "";
for (let i = 0; i <= maxIndex(); i += 1) {
const dot = document.createElement("button");
dot.type = "button";
dot.classList.toggle("active", i === reviewsIndex);
dot.addEventListener("click", function () {
reviewsIndex = i;
updateCarousel();
});
reviewsDots.appendChild(dot);
}
}
function updateCarousel() {
reviewsIndex = Math.min(reviewsIndex, maxIndex());
const card = reviewsCards[0];
const gap = 18;
const shift = reviewsIndex * (card.offsetWidth + gap);
reviewsTrack.style.transform = `translateX(-${shift}px)`;
[...reviewsDots.children].forEach(function (dot, index) {
dot.classList.toggle("active", index === reviewsIndex);
});
}
reviewsPrev.addEventListener("click", function () {
reviewsIndex = reviewsIndex <= 0 ? maxIndex() : reviewsIndex - 1;
updateCarousel();
});
reviewsNext.addEventListener("click", function () {
reviewsIndex = reviewsIndex >= maxIndex() ? 0 : reviewsIndex + 1;
updateCarousel();
});
window.addEventListener("resize", function () {
renderDots();
updateCarousel();
});
renderDots();
updateCarousel();