Slick destroy bug

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<div class="slider">
<div><img src="http://kenwheeler.github.io/slick/img/fonz1.png"/></div>
<div><img src="http://kenwheeler.github.io/slick/img/fonz2.png"/></div>
<div><img src="http://kenwheeler.github.io/slick/img/fonz3.png"/></div>
</div>

<div class="buttons">
    <button class="centerModeBtn">Remove centerMode</button>
    <button class="unslickBtn">Unslick</button>
</div>

CSS

img {
    width: 100%;
}
.slider {
    width: 80%;
}
.slick-prev {
    left: 20px;
}
.slick-next {
    right: 20px;
}

JavaScript

jQuery('.slider').slick({
autoplay:true,
    centerMode: true,
    centerPadding: '100px',
    dots: true
});
jQuery('.centerModeBtn').click(function() {
    jQuery('.slider').slickSetOption('centerMode', false); 
    jQuery('.buttons').append('<p>centerMode clicked</p>');  
});
jQuery('.unslickBtn').click(function() {
  jQuery('.slider').slick('slickPause');
    jQuery('.slider').slick("unslick");
    jQuery('.buttons').append('<p>unslick clicked</p>');
});