Как позиционировать slick slider абсолютно?

/** 
 
    This fiddle is using the latest version  
    of Slick (from master) and jQuery. 
 
    If your issue occurs in older version or a  
    specific tag; please use the "External Resources"  
    section in the sidebar to correct it. 
 
**/ 
 
 
$(".slider").slick({ 
  infinite: true, 
  slidesToShow: 3, 
  slidesToScroll: 1, 
  dots: true, 
 
});

.wrapper { 
  position: absolute; 
  width: calc(100vw - 16px); 
} 
 
.slider { 
  width: auto; 
  margin: 30px 50px 50px; 
  position: relative; 
} 
 
.list { 
  padding-left: 10px; 
  padding-right: 10px; 
  width: 50px; 
  height: 50px; 
  background-color: #aeaeae; 
} 
 
.sec { 
  background-color: red; 
} 
 
.slick-prev:before, 
.slick-next:before { 
  color: black; 
} 
 
.slick-dots { 
  bottom: -30px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script> 
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css"> 
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"> 
<div class="wrapper"> 
  <div class="wrap"> 
    <div class="slider"> 
      <div class="list"></div> 
      <!-- /.slider-item --> 
      <div class="list sec"></div> 
      <!-- /.slider-item --> 
      <div class="list"></div> 
      <!-- /.slider-item --> 
      <div class="list sec"></div> 
      <!-- /.slider-item --> 
      <div class="list"></div> 
      <!-- /.slider-item --> 
    </div> 
  </div> 
  <!-- /.wrap --> 
</div> 
<!-- /.wrapper -->