JSFiddle - React, Tailwind, and code Playground

by maximiloi

HTML

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="style.css">

  <title>Карусель</title>
</head>

<body>

  <section class="reviews">
    <h2 class="reviews__title">Отзывы наших клиентов</h2>

    <div class="reviews__wrapper">

      <div class="reviews__wrapper-text  slides">

        <div class="reviews__wrapper-img  slide  prev">
          <div class="reviews__photo">
            <img src="http://placekitten.com/250/200" alt="">
            <div class="reviews__photo-filter"></div>
          </div>
          <div class="reviews__content none">
            <div class="reviews__name">Тимофей Иванов</div>
            <div class="reviews__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. In adipisci deserunt
              facilis id blanditiis, impedit praesentium illum expedita quo nemo. Minus doloribus, libero expedita
              est, provident autem aliquid optio deserunt possimus, qui esse animi dolor quod non error! Quisquam,
              veniam!
            </div>
          </div>
        </div>
        <div class="reviews__wrapper-img  slide  on">
          <img class="reviews__photo" src="http://placekitten.com/250/201" alt="">
          <div class="reviews__content text">
            <div class="reviews__name">Тимофей Иванов</div>
            <div class="reviews__text">Сделал заказ у этих ребят сайт просто загледенье. Работает просто на ура,
              у нас везде теперь в поисковиках первое место. Так эти ребята ещё и молока налили с печеньками, про
              вынос какашек вообще говорить не приходиться.
            </div>
          </div>
        </div>
        <div class="reviews__wrapper-img  slide  next">
          <div class="reviews__photo">
            <img src="http://placekitten.com/250/202" alt="">
            <div...

CSS

.reviews {
  background-color: aliceblue;
}
.reviews__title {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 60px;
  padding: 0;
  color: black;
  font-family: "BodoniBold", sans-serif;
  font-size: 60px;
  line-height: 88px;
  letter-spacing: 1px;
}
.reviews__wrapper {
  margin: 0 auto;
  max-width: 1440px;
}
.reviews__wrapper-text {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.reviews__wrapper-list {
  margin: 0 auto;
  padding: 0;
  width: 280px;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.reviews__wrapper-item {
  margin-bottom: 80px;
  width: 60px;
  height: 4px;
  background-color: gray;
  cursor: pointer;
}
.reviews__wrapper-item.active {
  background-color: black;
}
.reviews__wrapper-img {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.reviews__wrapper-img.on {
  background-color: white;
  width: 730px;
  padding: 35px;
  align-items: flex-start;
}
.reviews__photo {
  position: relative;
  width: 250px;
  height: 200px;
}
.reviews__photo-filter::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(154, 158, 169, 0.6);
}
.reviews__name {
  margin-left: 20px;
  margin-bottom: 30px;
  font-size: 20px;
  line-height: 24px;
  color: black;
}
.reviews__text {
  width: 430px;
  margin-left: 20px;
  font-size: 14px;
  line-height: 20px;
}
.text {
  width: 790px;
}
.none {
  display: none;
}
.next,
.prev {
  cursor: pointer;
}

JavaScript

let slides = document.querySelector(".slides");
let slide = slides.querySelectorAll(".slide");
let slideActive = slides.querySelectorAll(".text");
let content = document.querySelectorAll(".reviews__content");
let prev = slides.querySelector(".prev");
let on = slides.querySelector(".on");
let next = slides.querySelector(".next");
let none = slides.querySelector(".none");
let contentText = slides.querySelector(".text");
let contentNone = slides.querySelector(".none");

prev.addEventListener("click", function () {
  for (let i = 0; i < slide.length; i++) {
    if (prev.classList.contains("prev")) {
      slide[i].classList.remove("prev");
      slide[i].classList.add("none");
    } else if (on.classList.contains("on")) {
      slide[i].classList.remove("on");
      slide[i].classList.add("prev");
      for (let j = 0; j < content.length; j++) {
        if (contentText.classList.contains("text")) {
          content[j].classList.remove("text");
          content[j].classList.add("none");
          content[j+1].classList.remove("none");
          content[j+1].classList.add("text");
        }
      }
    } else if (next.classList.contains("next")) {
      slide[i].classList.remove("next");
      slide[i].classList.add("on");
    } else {
      slide[i].classList.remove("none");
      slide[i].classList.add("next");
    }
  }
});