Слайдер для отзывов клиентов сайта на CSS

<div id="kagepisuceng" class="kagepisuceng">
  <ol class="kagepisuceng__indicators">
  <li class="kagepisuceng__indicator kagepisuceng__indicator_active" data-slide-to="0"></li>
  <li class="kagepisuceng__indicator" data-slide-to="1"></li>
  <li class="kagepisuceng__indicator" data-slide-to="2"></li>
  <li class="kagepisuceng__indicator" data-slide-to="3"></li>
  </ol>
  <div class="kagepisuceng__items">
  <div class="kagepisuceng__item kagepisuceng__item_1 kagepisuceng__item_active">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img class="kagepisuceng__item_photo" src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-1.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Валентин Маликов</span>
  <span class="kagepisuceng__item_post">Web Дизайн</span>
  <span class="kagepisuceng__item_text">
  Здесь идет описание, что он думает вообще об этом материале.
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_2">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-2.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Олеся Маркова</span>
  <span class="kagepisuceng__item_post">Web Стилист</span>
  <span class="kagepisuceng__item_text">
  Вообщем опять идет описание материала, что она приобрела, или простая реклама, которую предлагает на интернет ресурсе.
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_3">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-3.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Имя Фамилия</span>
  <span class="kagepisuceng__item_post">Какой Статус</span>
  <span class="kagepisuceng__item_text">
  Дело тонкое про описание
  </span>
  </span>
  </div>
  </div>
  <div class="kagepisuceng__item kagepisuceng__item_4">
  <div class="kagepisuceng__item_inner">
  <span class="kagepisuceng__item_img">
  <img src="http://zornet.ru/ABVUN/Abas/degakolas/dsanu/photo-4.jpg" alt="">
  </span>
  <span class="kagepisuceng__item_testimonial">
  <span class="kagepisuceng__item_name">Ирина Раентова</span>
  <span class="kagepisuceng__item_post">Web админ</span>
  <span class="kagepisuceng__item_text">
  Аналогично по описанию. то что нужно знать для своей рекламы.
  </span>
  </span>
  </div>
  </div>
  </div>
  <a class="kagepisuceng__control kagepisuceng__control_prev" href="#" role="button"></a>
  <a class="kagepisuceng__control kagepisuceng__control_next" href="#" role="button"></a>
  </div>

.kagepisuceng {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 960px;
  }

  .kagepisuceng__items {
  position: relative;
  width: 100%;
  overflow: hidden;
  }

  .kagepisuceng__item {
  position: relative;  
  display: none;
  width: 100%;
  transition: transform 0.6s ease;
  backface-visibility: hidden;
  }

  .kagepisuceng__item_active,
  .kagepisuceng__item_next,
  .kagepisuceng__item_prev {
  display: block;
  }

  .kagepisuceng__item_next,
  .kagepisuceng__item_prev {
  position: absolute;

  top: 0;
  }

  .kagepisuceng__item_next.kagepisuceng__item_left,
  .kagepisuceng__item_prev.kagepisuceng__item_right {
  transform: translateX(0);
  }

  .kagepisuceng__item_next,
  .kagepisuceng__item_right.kagepisuceng__item_active {
  transform: translateX(100%);
  }

  .kagepisuceng__item_prev,
  .kagepisuceng__item_left.kagepisuceng__item_active {
  transform: translateX(-100%);
  }

   

  .kagepisuceng__control {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  }

  .kagepisuceng__control:hover,
  .kagepisuceng__control:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
  }

  .kagepisuceng__control_prev {
  left: 0;
  }

  .kagepisuceng__control_next {
  right: 0;
  }

  .kagepisuceng__control::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
  }

  .kagepisuceng__control_prev::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }

  .kagepisuceng__control_next::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  }

  /* индикаторы слайдера */

  .kagepisuceng__indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
  }

  .kagepisuceng__indicator {
  position: relative;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  }

  .kagepisuceng__indicator::before {
  position: absolute;
  top: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .kagepisuceng__indicator::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 10px;
  content: "";
  }

  .kagepisuceng__indicator_active {
  background-color: #fff;
  }

  img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  }

  .kagepisuceng__item {}

  .kagepisuceng__item_1 {
  background: linear-gradient(45deg, #085078 10%, #85d8ce 90%);
  }

  .kagepisuceng__item_2 {
  background: linear-gradient(to right, #dd1818, #333333);
  }

  .kagepisuceng__item_3 {
  background: linear-gradient(to right, #093028, #237a57);
  }

  .kagepisuceng__item_4 {
  background: linear-gradient(to right, #243B55, #141E30);
  }

  .kagepisuceng__item {
  height: 320px;
  overflow: hidden;
  }

  .kagepisuceng__item_inner {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 36px;
  bottom: 36px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }

  .kagepisuceng__item_img {
  flex: 0 0 80px;
  max-width: 80px;
  }

  .kagepisuceng__item_testimonial {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  text-align: center;

  }

  @media (min-width: 576px) {
  .kagepisuceng__item {
  height: 250px;
  }
  .kagepisuceng__item_inner {
  flex-direction: row;
  }
  .kagepisuceng__item_testimonial {
  margin-left: 15px;
  }
  .kagepisuceng__item_img {
  flex: 0 0 150px;
  max-width: 150px;
  }
  .kagepisuceng__item_testimonial {
  text-align: left;
  }
  }

  .kagepisuceng__item_name {
  font-size: 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .kagepisuceng__item_post {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  }

  .kagepisuceng__item_text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  }

'use strict';
  var kagepisuceng = (function (config) {

  const ClassName = {
  INDICATOR_ACTIVE: 'kagepisuceng__indicator_active',
  ITEM: 'kagepisuceng__item',
  ITEM_LEFT: 'kagepisuceng__item_left',
  ITEM_RIGHT: 'kagepisuceng__item_right',
  ITEM_PREV: 'kagepisuceng__item_prev',
  ITEM_NEXT: 'kagepisuceng__item_next',
  ITEM_ACTIVE: 'kagepisuceng__item_active'
  }

  var
  _isSliding = false, // индикация процесса смены слайда
  _interval = 0, // числовой идентификатор таймера
  _transitionDuration = 700, // длительность перехода
  _kagepisuceng = {}, // DOM элемент слайдера
  _items = {}, // .kagepisuceng-item (массив слайдов)  
  _kagepisucengIndicators = {}, // [data-slide-to] (индикаторы)
  _config = {
  selector: '', // селектор слайдера
  isCycling: true, // автоматическая смена слайдов
  direction: 'next', // направление смены слайдов
  interval: 5000, // интервал между автоматической сменой слайдов
  pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
  };

  var
  // функция для получения порядкового индекса элемента
  _getItemIndex = function (_currentItem) {
  var result;
  _items.forEach(function (item, index) {
  if (item === _currentItem) {
  result = index;
  }
  });
  return result;
  },
  // функция для подсветки активного индикатора
  _setActiveIndicator = function (_activeIndex, _targetIndex) {
  if (_kagepisucengIndicators.length !== _items.length) {
  return;
  }
  _kagepisucengIndicators[_activeIndex].classList.remove(ClassName.INDICATOR_ACTIVE);
  _kagepisucengIndicators[_targetIndex].classList.add(ClassName.INDICATOR_ACTIVE);
  },

  // функция для смены слайда
  _slide = function (direction, activeItemIndex, targetItemIndex) {
  var
  directionalClassName = ClassName.ITEM_RIGHT,
  orderClassName = ClassName.ITEM_PREV,
  activeItem = _items[activeItemIndex], // текущий элемент
  targetItem = _items[targetItemIndex]; // следующий элемент

  var _slideEndTransition = function () {
  activeItem.classList.remove(ClassName.ITEM_ACTIVE);
  activeItem.classList.remove(directionalClassName);
  targetItem.classList.remove(orderClassName);
  targetItem.classList.remove(directionalClassName);
  targetItem.classList.add(ClassName.ITEM_ACTIVE);
  window.setTimeout(function () {
  if (_config.isCycling) {
  clearInterval(_interval);
  _cycle();
  }
  _isSliding = false;
  activeItem.removeEventListener('transitionend', _slideEndTransition);
  }, _transitionDuration);
  };

  if (_isSliding) {
  return;  
  }
  _isSliding = true;  

  if (direction === "next") {
  directionalClassName = ClassName.ITEM_LEFT;
  orderClassName = ClassName.ITEM_NEXT;
  }

  targetItem.classList.add(orderClassName);  
  _setActiveIndicator(activeItemIndex, targetItemIndex);  
  window.setTimeout(function () {  
  targetItem.classList.add(directionalClassName);
  activeItem.classList.add(directionalClassName);
  activeItem.addEventListener('transitionend', _slideEndTransition);
  }, 0);

  },

  _slideTo = function (direction) {
  var
  activeItem = _kagepisuceng.querySelector('.' + ClassName.ITEM_ACTIVE),  
  activeItemIndex = _getItemIndex(activeItem),  
  lastItemIndex = _items.length - 1,  
  targetItemIndex = activeItemIndex === 0 ? lastItemIndex : activeItemIndex - 1;
  if (direction === "next") {  
  targetItemIndex = activeItemIndex == lastItemIndex ? 0 : activeItemIndex + 1;
  }
  _slide(direction, activeItemIndex, targetItemIndex);
  },
   
  _cycle = function () {
  if (_config.isCycling) {
  _interval = window.setInterval(function () {
  _slideTo(_config.direction);
  }, _config.interval);
  }
  },

  _actionClick = function (e) {
  var
  activeItem = _kagepisuceng.querySelector('.' + ClassName.ITEM_ACTIVE),  
  activeItemIndex = _getItemIndex(activeItem),  
  targetItemIndex = e.target.getAttribute('data-slide-to');

  if (!(e.target.hasAttribute('data-slide-to') || e.target.classList.contains('kagepisuceng__control'))) {
  return;
  }
  if (e.target.hasAttribute('data-slide-to')) {
  if (activeItemIndex === targetItemIndex) {
  return;
  }
  _slide((targetItemIndex > activeItemIndex) ? 'next' : 'prev', activeItemIndex, targetItemIndex);
  } else {
  e.preventDefault();
  _slideTo(e.target.classList.contains('kagepisuceng__control_next') ? 'next' : 'prev');
  }
  },

  _setupListeners = function () {
   
  _kagepisuceng.addEventListener('click', _actionClick);

  if (_config.pause && _config.isCycling) {
  _kagepisuceng.addEventListener('mouseenter', function (e) {
  clearInterval(_interval);
  });
  _kagepisuceng.addEventListener('mouseleave', function (e) {
  clearInterval(_interval);
  _cycle();
  });
  }
  };

  for (var key in config) {
  if (key in _config) {
  _config[key] = config[key];
  }
  }
  _kagepisuceng = (typeof _config.selector === 'string' ? document.querySelector(_config.selector) : _config.selector);
  _items = _kagepisuceng.querySelectorAll('.' + ClassName.ITEM);
  _kagepisucengIndicators = _kagepisuceng.querySelectorAll('[data-slide-to]');
  // запуск функции cycle
  _cycle();
  _setupListeners();

  return {
  next: function () {  
  _slideTo('next');
  },
  prev: function () {  
  _slideTo('prev');
  },
  stop: function () {
  clearInterval(_interval);
  },
  cycle: function () {  
  clearInterval(_interval);
  _cycle();
  }
  }
  }({
  selector: '.kagepisuceng',
  isCycling: false,
  direction: 'next',
  interval: 5000,
  pause: true
  }));