Как уменьшить общий размер слайдера

// Params 
var mainSliderSelector = '.main-slider', 
    navSliderSelector = '.nav-slider', 
    interleaveOffset = 0.5; 
 
// Main Slider 
var mainSliderOptions = { 
      loop: true, 
      speed:1000, 
      autoplay:{ 
        delay:3000 
      }, 
      loopAdditionalSlides: 10, 
      grabCursor: true, 
      watchSlidesProgress: true, 
      navigation: { 
        nextEl: '.swiper-button-next', 
        prevEl: '.swiper-button-prev', 
      }, 
      on: { 
        init: function(){ 
          this.autoplay.stop(); 
        }, 
        imagesReady: function(){ 
          this.el.classList.remove('loading'); 
          this.autoplay.start(); 
        }, 
        slideChangeTransitionEnd: function(){ 
          var swiper = this, 
              captions = swiper.el.querySelectorAll('.caption'); 
          for (var i = 0; i < captions.length; ++i) { 
            captions[i].classList.remove('show'); 
          } 
          swiper.slides[swiper.activeIndex].querySelector('.caption').classList.add('show'); 
        }, 
        progress: function(){ 
          var swiper = this; 
          for (var i = 0; i < swiper.slides.length; i++) { 
            var slideProgress = swiper.slides[i].progress, 
                innerOffset = swiper.width * interleaveOffset, 
                innerTranslate = slideProgress * innerOffset; 
            swiper.slides[i].querySelector(".slide-bgimg").style.transform = 
              "translate3d(" + innerTranslate + "px, 0, 0)"; 
          } 
        }, 
        touchStart: function() { 
          var swiper = this; 
          for (var i = 0; i < swiper.slides.length; i++) { 
            swiper.slides[i].style.transition = ""; 
          } 
        }, 
        setTransition: function(speed) { 
          var swiper = this; 
          for (var i = 0; i < swiper.slides.length; i++) { 
            swiper.slides[i].style.transition = speed + "ms"; 
            swiper.slides[i].querySelector(".slide-bgimg").style.transition = 
              speed + "ms"; 
          } 
        } 
      } 
    }; 
var mainSlider = new Swiper(mainSliderSelector, mainSliderOptions); 
 
// Navigation Slider 
var navSliderOptions = { 
      loop: true, 
      loopAdditionalSlides: 10, 
      speed:1000, 
      spaceBetween: 5, 
      slidesPerView: 5, 
      centeredSlides : true, 
      touchRatio: 0.2, 
      slideToClickedSlide: true, 
      direction: 'vertical', 
      on: { 
        imagesReady: function(){ 
          this.el.classList.remove('loading'); 
        }, 
        click: function(){ 
          mainSlider.autoplay.stop(); 
        } 
      } 
    }; 
var navSlider = new Swiper(navSliderSelector, navSliderOptions); 
 
// Matching sliders 
mainSlider.controller.control = navSlider; 
navSlider.controller.control = mainSlider;

%transition_all_03s { 
  transition:all .3s ease; 
} 
%backface_visibility_hidden{ 
  backface-visibility:hidden; 
  -webkit-backface-visibility:hidden; 
} 
 
*, *:before, *:after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
.swiper-container { 
  width: 80%; 
  height: 100vh; 
  // display:inline-block; 
  // vertical-align:top; 
  float:left; 
  transition:opacity .6s ease, transform .3s ease; 
  &.nav-slider{ 
    width:20%; 
    padding-left:5px; 
    .swiper-slide{ 
      cursor:pointer; 
      opacity:.4; 
      transition:opacity .3s ease; 
      &.swiper-slide-active{ 
        opacity:1; 
      } 
      .content{ 
        width:100%; 
        .title{ 
          font-size:20px; 
        } 
      } 
    } 
  } 
  &:hover{ 
    .swiper-button-prev, 
    .swiper-button-next{ 
      transform:translateX(0); 
      opacity:1; 
      visibility:visible; 
    } 
  } 
  &.loading{ 
    opacity:0; 
    visibility:hidden; 
  } 
} 
.swiper-wrapper{ 
 
} 
.swiper-slide{ 
  overflow: hidden; 
  @extend %backface_visibility_hidden; 
  .slide-bgimg{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-position:center; 
    background-size:cover; 
  } 
  .entity-img{ 
    display:none; 
  } 
  .content{ 
    position:absolute; 
    top:40%; 
    left:0; 
    width:50%; 
    padding-left:5%; 
    color:#fff; 
    .title{ 
      font-size:2.6em; 
      font-weight:bold; 
      margin-bottom:30px; 
    } 
    .caption{ 
      display:block; 
      font-size:13px; 
      line-height:1.4; 
      transform:translateX(50px); 
      opacity:0; 
      transition:opacity .3s ease, transform .7s ease; 
      &.show{ 
        transform:translateX(0); 
        opacity:1; 
      } 
    } 
  } 
} 
[class^="swiper-button-"]{ 
  width:44px; 
  opacity:0; 
  visibility:hidden; 
  @extend %transition_all_03s; 
} 
.swiper-button-prev{ 
  transform:translateX(50px); 
} 
.swiper-button-next{ 
  transform:translateX(-50px); 
} 
[class^="swiper-button-"] { 
  -webkit-transition: all .3s ease; 
  transition: all .3s ease; 
} 
 
.swiper-slide { 
  backface-visibility: hidden; 
  -webkit-backface-visibility: hidden; 
} 
 
*, *:before, *:after { 
  -webkit-box-sizing: border-box; 
          box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
.swiper-container { 
  width: 80%; 
  height: 100vh; 
  float: left; 
  -webkit-transition: opacity .6s ease, -webkit-transform .3s ease; 
  transition: opacity .6s ease, -webkit-transform .3s ease; 
  transition: opacity .6s ease, transform .3s ease; 
  transition: opacity .6s ease, transform .3s ease, -webkit-transform .3s ease; 
} 
.swiper-container.nav-slider { 
  width: 20%; 
  padding-left: 5px; 
} 
.swiper-container.nav-slider .swiper-slide { 
  cursor: pointer; 
  opacity: .4; 
  -webkit-transition: opacity .3s ease; 
  transition: opacity .3s ease; 
} 
.swiper-container.nav-slider .swiper-slide.swiper-slide-active { 
  opacity: 1; 
} 
.swiper-container.nav-slider .swiper-slide .content { 
  width: 100%; 
} 
.swiper-container.nav-slider .swiper-slide .content .title { 
  font-size: 20px; 
} 
.swiper-container:hover .swiper-button-prev, 
.swiper-container:hover .swiper-button-next { 
  -webkit-transform: translateX(0); 
          transform: translateX(0); 
  opacity: 1; 
  visibility: visible; 
} 
.swiper-container.loading { 
  opacity: 0; 
  visibility: hidden; 
} 
 
.swiper-slide { 
  overflow: hidden; 
} 
.swiper-slide .slide-bgimg { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-position: center; 
  background-size: cover; 
} 
.swiper-slide .entity-img { 
  display: none; 
} 
.swiper-slide .content { 
  position: absolute; 
  top: 40%; 
  left: 0; 
  width: 50%; 
  padding-left: 5%; 
  color: #fff; 
} 
.swiper-slide .content .title { 
  font-size: 2.6em; 
  font-weight: bold; 
  margin-bottom: 30px; 
} 
.swiper-slide .content .caption { 
  display: block; 
  font-size: 13px; 
  line-height: 1.4; 
  -webkit-transform: translateX(50px); 
          transform: translateX(50px); 
  opacity: 0; 
  -webkit-transition: opacity .3s ease, -webkit-transform .7s ease; 
  transition: opacity .3s ease, -webkit-transform .7s ease; 
  transition: opacity .3s ease, transform .7s ease; 
  transition: opacity .3s ease, transform .7s ease, -webkit-transform .7s ease; 
} 
.swiper-slide .content .caption.show { 
  -webkit-transform: translateX(0); 
          transform: translateX(0); 
  opacity: 1; 
} 
 
[class^="swiper-button-"] { 
  width: 44px; 
  opacity: 0; 
  visibility: hidden; 
} 
 
.swiper-button-prev { 
  -webkit-transform: translateX(50px); 
          transform: translateX(50px); 
} 
 
.swiper-button-next { 
  -webkit-transform: translateX(-50px); 
          transform: translateX(-50px); 
}

<!DOCTYPE html> 
<html lang="en" > 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Horizontal parallax sliding slider  with Swiper.js</title> 
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
 
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css'> 
 
      <link rel="stylesheet" href="css/style.css"> 
 
   
</head> 
 
<body> 
 
  <div class="swiper-container main-slider loading"> 
  <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Shaun Matthews</p> 
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Alexis Berry</p> 
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Billie	Pierce</p> 
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Trevor	Copeland</p> 
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Bernadette	Newman</p> 
        <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> 
      </div> 
    </div> 
  </div> 
  <!-- If we need navigation buttons --> 
  <div class="swiper-button-prev swiper-button-white"></div> 
  <div class="swiper-button-next swiper-button-white"></div> 
</div> 
 
<!-- Thumbnail navigation --> 
<div class="swiper-container nav-slider loading"> 
  <div class="swiper-wrapper"> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Shaun Matthews</p> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Alexis Berry</p> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Billie	Pierce</p> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Trevor	Copeland</p> 
      </div> 
    </div> 
    <div class="swiper-slide"> 
      <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)"> 
        <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" /> 
      </figure> 
      <div class="content"> 
        <p class="title">Bernadette	Newman</p> 
      </div> 
    </div> 
  </div> 
</div> 
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js'></script> 
 
   
 
    <script  src="js/index.js"></script> 
 
 
 
 
</body> 
 
</html>