Slick

does not work during transition

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="slick">
  <img src="http://placekitten.com/g/200/200" height="200" width="200" />
  <img src="http://placekitten.com/g/300/200" height="200" width="200" />
  <img src="http://placekitten.com/g/200/200" height="200" width="200" />
  <img src="http://placekitten.com/g/300/200" height="200" width="200" />
  <img src="http://placekitten.com/g/200/200" height="200" width="200" />
  <img src="http://placekitten.com/g/300/200" height="200" width="200" />
</div>

<a href="javascript:;" class="slick-next">
  next
</a>
</div>

CSS

.slick {
  height: 200px !important;
  width: 100% !important;
}

JavaScript

$('.slick').slick({
  infinite: true,
  speed: 5000,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  autoplay: true,
  autoplaySpeed: 200,
  prevArrow: '',
  nextArrow: '',
});

$('.slick-next').click(function() {
  $('.slick').slick("slickSetOption", 'speed', 1, true)
  $('.slick').slick("slickNext")
  $('.slick').slick("slickSetOption", 'speed', 5000, true)
});