Студеникин Максим's questions

//slider

//click ruls btn

$(".reviews__controls").on('click', function(event) {
  event.preventDefault();

  var $this = $(event.target),
    cont = $this.closest(".reviews__slider"),
    items = $(".reviews__item", cont),
    activeItem = items.filter('.active__slide');
  var existedItem,
    edgeItem,
    reqItem;

  console.log($this)
  console.log(cont)
  console.log(items)
  console.log(activeItem)
  console.log(existedItem)
  console.log(edgeItem)
  console.log(reqItem)



  if ($this.hasClass('reviews__btn_next')) {
    existedItem = activeItem.next();
    edgeItem = items.first();
    console.log(existedItem)
    console.log(edgeItem)
    console.log($this)
  }

  if ($this.hasClass('reviews__btn_prev')) {
    existedItem = activeItem.prev();
    edgeItem = items.last();
    console.log(existedItem)
    console.log(edgeItem)
    console.log($this)
  }

  reqItem = existedItem.length ? existedItem.index() : edgeItem.index();


  moveSlide(cont, reqItem);

});

//searh number slid and activ slide

var moveSlide = function(cont, slideNum) {

  var items = cont.find(".reviews__item"),
    activeSlide = items.filter('.active__slide'),
    reqItem = items.eq(slideNum),
    reqIndex = reqItem.index(),
    list = cont.find(".slider__list"),
    dur = 500;

  if (reqItem.length) {
    list.animate({
      'left': -reqIndex * 100 + '%'
    }, dur, function() {
      activeSlide.removeClass('active__slide');
      reqItem.addClass('active__slide');
    });
  }

};

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

p {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

footer {
  position: relative;
  width: 100%;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 16px;
  line-height: 1.42;
}

section {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.maincontent {
  width: 100%;
  height: 100%;
  min-height: 650px;
}

.reviews {
  position: relative;
  color: #fff;
  display: flex;
  height: 90%;
}

.reviews__slider {
  position: relative;
  width: 100%;
}

.reviews__list {
  position: relative;
  white-space: nowrap;
  top: 30%;
  left: 0;
}

.reviews__item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.reviews__controls,
.reviews__btn_next,
.reviews__btn_prev {
  position: absolute;
}

.reviews__controls {
  width: 85%;
  top: 45%;
}

.reviews__btn_next {
  right: 0;
}

.reviews__btn_prev {
  right: 80%;
}

.reviews__arrow_right,
.reviews__arrow_left {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 0.625rem;
}

.reviews__arrow_left {
  position: relative;
  transform: rotate(135deg);
  top: 15px;
  left: 20px;
}

.reviews__arrow_right {
  position: relative;
  transform: rotate(-45deg);
  top: 15px;
  left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="maincontent">
    <section class="reviews">
      <div class="reviews__slider">
        <ul class="reviews__list">
          <li class="reviews__item active__slide">
            <p class="paragraph__quote">These guys do amazing work here. They made my car awesome.</p>
            <div class="user__info"><span class="user__name">John Brown</span><span class="user__car">Chevrolet Camaro</span></div>
          </li>
          <li class="reviews__item">
            <p class="paragraph__quote">Lorem ipsum dolor sit amet</p>
            <div class="user__info"><span class="user__name">Brown John</span><span class="user__car">Chevrolet</span></div>
          </li>
          <li class="reviews__item">
            <p class="paragraph__quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, explicabo.</p>
            <div class="user__info"><span class="user__name">John</span><span class="user__car">Camaro</span></div>
          </li>
        </ul>
        <div class="reviews__controls"><a href="#" class="review__btn btn__prev reviews__btn_prev"><i class="reviews__arrow_left"></i></a><a href="#" class="review__btn btn__next reviews__btn_next"><i class="reviews__arrow_right"></i></a></div>
      </div>
    </section>
  </div>
</div>