JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="comments">
  <div class="slider" id="slider">
    <div class="img">
      <img class="author-photo" src="img/avatar-1.jpg">
      <div class="author-name">Steve Jobs<span>CEO, Apple.</span>
      </div>
      <p>hello, world!!</p>
    </div>
    <div class="img">
      <img class="author-photo" src="img/avatar-2.jpg">
      <div class="author-name">John Doe<span>CEO, ABC Corp.</span>
      </div>
      <p>fuck the world</p>
    </div>
    <div class="img">
      <img class="author-photo" src="img/avatar-3.jpg">
      <div class="author-name">Fucking Fuck<span>Anonymous</span>
      </div>
      <p>fuck everything</p>
    </div>
  </div>
  <div class="prev n" data-change="-1">
    <i class="fas fa-arrow-left"></i>
  </div>
  <div class="next n" data-change="+1">
    <i class="fas fa-arrow-right"></i>
  </div>
</div>

CSS

.comments {
  position: relative;
}
.slider {
  width: 580px;
  height: 500px;
  margin: 55px auto;
}
.img {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  position: absolute;
  font-size: 1em;
  color: #fff;
  display: none;
  width: 580px;
}
.author-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 9px solid #eaeaed;
}
.author-name {
  color: #000;
  font-size: 0.8em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-top: 10px;
}
.author-name span {
  color: #8d8d8d;
  text-transform: none;
  font-size: 0.9em;
  font-weight: 700;
  display: block;
  padding: 10px 0 7px 0;
}
.img:first-child span {
  word-spacing: -0.41em;
}
.img:nth-child(2) span {
  word-spacing: -0.25em;
}
.img p {
  color: #8c8c8c;
  font-size: 1.4em;
  line-height: 1.8em;
  word-spacing: 0;
  text-align: center;
  position: relative;
}
.img p::before,
.img p::after {
  display: block;
  font-family: Arial, sans-serif;
  color: #c7c7c7;
  font-size: 2.5em;
  position: absolute;
}
.img p::before {
  content: '\201C';
  top: 9px;
  left: -3px;
}
.img p::after {
  content: '\201D';
  bottom: -9px;
  right: 115px;
}
.img.active {
  display: block;
}
.n {
  color: #575757;
}
.prev, .next {
  position: absolute;
  top: 430px;
  background: #eaeaed;
  color: #8c8c8c;
  width: 47px;
  text-align: center;
  border-radius: 4px;
  padding: 13px 0;
}
.prev i, .next i {
  font-size: 13px;
}
.prev {
  left: 200px;
}
.next {
  right: 200px;
}
.prev:hover, .next:hover {
  background: #05bca9;
  color: #fff;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

.dots {
  display: flex;
  justify-content: center;
}

.dot {
  display: inline-flex;
  color: red;
  font-weight: bold;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin:...

JavaScript

$('<div class="dots"></div>')
  .html([...Array($('.slider .img').length)].fill(`<span></span>`).join(''))
  .find('span')
    .addClass('dot')
    .text(i => i + 1)
    .attr('data-slide', i => i)
    .end()
  .on('click', '.dot', e => setActiveSlide(e.target.dataset.slide))
  .prependTo('.comments');

function setActiveSlide(n) {
  const
    $slides = $('.slider .img'),
    index = n % $slides.length;

  $slides.filter('.active').fadeOut(500).removeClass('active');
  $slides.eq(index).fadeIn(500).addClass('active');
  $('.dots .dot').removeClass('active').eq(index).addClass('active');
}

$('[data-change]').click(function() {
  setActiveSlide($('.slider .active').index() + +this.dataset.change);
});

setActiveSlide(0);