Slick slider inside slider

by head__space

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="wrapper-slider">
  <div><h2>0</h2>
    <div class="holder">
    <div class="wrapper-inner-slider">
    <div><h2>inner #1</h2></div>
  <div><h2>inner #2</h2></div>
  <div><h2>inner #3</h2></div>
    </div></div>
  </div>
  <div><h2>1</h2></div>
  <div><h2>2</h2></div>
  <div><h2>3</h2></div>
</div>

CSS

.wrapper-slider div {
  background-color: gray;
  height: 300px;
  width: 500px;
}

.wrapper-inner-slider div {
  background-color: #fff;
  height: 200px;
  width: 200px;
}

.holder {
  padding-left: 150px;    
}

JavaScript

$('.wrapper-slider').slick({
  dots: true,
    infinite: true,
		centerMode: false,
		variableWidth: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: true,  
});

$('.wrapper-inner-slider').slick({
  dots: true,
        infinite: false,
		centerMode: false,
		variableWidth: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: true,  
});