Как сделать стрелки slick slider в отдельном контейнере?

$('.slider').slick({ 
  dots:false, 
  arrows:true, 
  appendArrows:'.slider-arrows', 
  prevArrow:'<span class="slider-arrow"><</span>', 
  nextArrow:'<span class="slider-arrow">></span>' 
})

.slide{ 
  height:50px; 
  line-height:50px; 
  text-align:center; 
  font-size:30px; 
  background-color:#cda; 
} 
.slider-arrows{ 
  border:1px solid red; 
} 
.slider-arrow{ 
  display:inline-block; 
  width:30px; 
  height:30px; 
  border-radius:50%; 
  line-height:30px; 
  text-align:center; 
  font-weight:bold; 
  color:#fff; 
  background-color:rgba(0,0,0,.4); 
  cursor:pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> 
 
<div class="slider"> 
  <div class="slide">1</div> 
  <div class="slide">2</div> 
  <div class="slide">3</div> 
  <div class="slide">4</div> 
</div> 
<div class="slider-arrows"></div>