Адаптивный слайдер с переключением по клику

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-content">
  <div class="header">
  <div class="logo">Актрисы <span>Голливуда</span></div>
  </div>
  <div class="slider-wrapper">
  <div class="slider-container">  
  <div class="control-nav">
  <ul><li class="slider-nav nav-0 active">1</li><li class="slider-nav nav-1">2</li><li class="slider-nav nav-2">3</li><li class="slider-nav nav-3">4</li></ul>
  </div>
  <div class="next-button" style="pointer-events: auto;">
  <svg class="arrow-right-5" viewBox="0 0 154 109">
  <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4">
  <g>
  <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "></polygon>
  </g>
  <g>
  <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "></polygon>
  </g>
  </symbol>
  <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)"></use>
  </svg>
  </div>
  <div class="slide active" style="opacity: 1;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/s5700299.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Эмили Блант</div>
  <div class="title-2">Англо-американская актриса, обладательница премий «Золотой глобус»</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/6553720.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Кейт Бекинсейл</div>
  <div class="title-2">Британская актриса.</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/s3239115.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Оливия Уайлд</div>
  <div class="title-2">Американская актриса, продюсер и режиссёр.</div>
  </div>
  </div>
  </div>
  </div>
  <div class="slide" style="opacity: 0;">
  <div class="slide-content ">
  <div class="clip-svg" style="transition-duration: 800ms;">
  <img class="" src="http://zornet.ru/_fr/32/5580094.jpg" alt="">
  <div class="title-wrapper">
  <div class="title-1">Алисия Викандер</div>
  <div class="title-2">Шведская актриса, танцовщица и продюсер</div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  <div class="footer-wrapper">
  <ul>
  <li><a href="http://zornet.ru/">Слайдеры</a></li>
  <li><a href="#link">Блог</a></li>
  </ul>
  </div>
</div>

.slider-content * {
  box-sizing: border-box;
  font-family: Verdana, sans-serif;  
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7);  
}
.slider-content {
  position: relative;
  background: #fff;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.slider-content .slider-container {
  position: relative;
  height: 600px;
  overflow: hidden;
}
.slider-content .slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider-content .header {
  position: absolute;
  top: 30px;
  left: 40px;
  z-index: 999;
}
.slider-content .header .logo {
  font-size: 26px;
  color: white;  
}
.slider-content .header .logo span {
  font-weight: bold;
}
.slider-content .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.slider-content .slide:after {
  content: "";
  display: table;
  clear: both;
}
.slider-content .slide.active {
  opacity: 1;
}
.slider-content .slide .clip-svg {
  clip-path: circle(25px at 90%);
  width: 100%;
  height: 100%;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.slider-content .slide.active .clip-svg {
  clip-path: circle(130% at 90%);
}
.slider-content img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-content .title-wrapper {
  position: absolute;
  color: white;
  left: 80px;
  bottom: 80px;
  width: calc(100% - 160px);  
}
.slider-content .title-wrapper .title-1 {
  font-size: 30px;
  margin: 0;
  margin-bottom: 20px;
  font-weight: 900;  
}
.slider-content .title-wrapper .title-2 {
  font-size: 22px;
  margin: 0;  
}
.slider-content .control-nav {
  position: absolute;
  left: 30px;
  top: 20%;
  z-index: 999;
}
.slider-content .control-nav ul {
  position: relative;
  list-style: none;
  padding: 0;
}
.slider-content .control-nav li {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 10px 0;
  background: white;
  opacity: 0.5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;  
  font-size: 13px;
  font-weight: bold;
}
.slider-content .control-nav li.active {
  opacity: 1;
}
.slider-content .next-button {
  position: absolute;
  right: 1%;
  height: 20%;
  width: 20%;  
  top: 40%;
  cursor: pointer;
  z-index: 999;
}
.slider-content .next-button svg {
  height: 100%;
  width: 100%;
  transform: rotate(270deg);  
  fill: #FFF;
}
.slider-content .footer-wrapper {
  position: absolute;
  color: white;
  bottom: 30px;
  right: 40px;
  z-index: 10;
}
.slider-content .footer-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  box-shadow: inset 0 18px 12px -12px rgba(0,0,0,0.4);
}
.slider-content .footer-wrapper ul:after {
  content: "";
  display: table;
  clear: both;
}
.slider-content .footer-wrapper li {
  position: relative;
  float: left;
  margin: 0 12px;
}  
.slider-content .footer-wrapper a {
  color: #FFF;
  text-decoration:none;
  transition-duration: 0.3s;
  display:inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}  
.slider-content .footer-wrapper a:hover {
  color: #FFF;
  text-decoration:none;
}  
.slider-content .footer-wrapper a:after {
  display: block;
  content: "";
  height: 2px;
  width: 0%;
  background-color: #FFF;
  transition: width 0.2s ease-in-out;
}
.slider-content .footer-wrapper a:hover:after,
.slider-content .footer-wrapper a:focus:after {
  width: 100%;
}

let mySlider = {
  config : {  
  slider : '.slider-content',
  activeSlide : '.slide.active',
  button: '.next-button',
  transition: 800,
  delay: function() {return this.transition;},
  navigation : '.control-nav'
  },
  init : function(config) {
  this.createNav();
  $(mySlider.config.button).click(function() {
  mySlider.animateSlide($(this));
  });
  },
  getActiveSlide : function() {
  return $(mySlider.config.activeSlide);  
  },
  getNextSlide : function() {
  let nextSlide = mySlider.getActiveSlide().next();
  if ( nextSlide.length === 0 ){
  nextSlide = $(mySlider.config.slider).find('.slide').eq(0);  
  }  
  return nextSlide;
  },  
  createNav : function() {
  let totalSlides = $(mySlider.config.slider).find('.slide').length;
  let controlNav = $(mySlider.config.navigation).find('ul');
  let nav;  
  for( let i=0; i < totalSlides; i++ ){
  let active = "";
  if(i === 0){
  active = 'active';
  }
  controlNav.append('<li class="slider-nav nav-'+i+' '+active+' ">'+ (i+1) +'</li>')
  }  
  },
  animateNav : function() {
  let activeNav = $('li.active');
  let nextNav = activeNav.next();
  if(nextNav.length === 0){
  nextNav = $('.control-nav li').eq(0);
  }
  activeNav.removeClass('active');
  nextNav.addClass('active');
  },
  animateSlide : function(button) {
  let activeSlide = mySlider.getActiveSlide();
  let nextSlide = mySlider.getNextSlide();
  let delay = mySlider.config.delay();  
  let clipPath = $('.clip-svg');
  clipPath.css('transition-duration', mySlider.config.transition+'ms');
  button.css('pointer-events', 'none');
  nextSlide.css('z-index',10);
  nextSlide.addClass('active').css('opacity', 1);  
  setTimeout(function() {
  activeSlide.removeClass('active').css('opacity', 0);
  }, delay);
  setTimeout(function() {
  nextSlide.css('z-index','');
  button.css('pointer-events', 'auto');
  }, delay + 300);
  mySlider.animateNav();
  }
}  
$(document).ready(function() { mySlider.init(); });