Slickで、.slick-activeが外れた瞬間にアニメーションが解除されてしまう

Question

前提・実現したいこと

ウィンドウ幅より大きい画像を左へ移動させながら、
Slickのfadeモードで、一枚ずつスライドしたいです。

発生している問題・エラーメッセージ

ほぼ実現できたのですが、
.slick-activeクラスが外れ次のスライドが表示される間、一瞬ですが画像が元の位置に戻ってしまうのがチラッと見えてしまいます。

該当のソースコード

デモURLはこちらです。
https://jsfiddle.net/rgncqjy4/
JQueryのバージョンなどはデモをご確認いただけますと幸いです。

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<section>
  <div class="autoplay">
    <img src="http://unsplash.it/500/300">
    <img src="http://unsplash.it/500/300/?image=1044">
  </div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

CSS

body{
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.slick-slide{
  min-height: 40vh;
}
.slick-active{
  animation: anim 10s forwards;
  z-index: 999;
}
img{
  width: 120%!important;
}
@keyframes anim {
0% {
transform: translateX(0%);
}

100% {
transform: translateX(-20%);

}
}

Slickの設定

 $('.autoplay').slick({
  autoplay: true,
  autoplaySpeed: 5000,
  fade: true,
  infinite: true,
});

試したこと

slickのautoplaySpeedを、
CSSのanimationの長さより短く指定したりしてみたのですが、効果がありませんでした。

補足情報（FW/ツールのバージョンなど）

Slickに拘っているわけではないので、他に良いプラグインや方法があれば変更も考えております。

表現が伝わりにくい、説明が足りない部分があるかと思いますので、ご指摘くださいましたら追加補足させていただきますので何卒よろしくお願い致します。

Answer 1

いまだに解決出来ず不甲斐なく思っております。
いったん回答募集は終了させて頂きます。
自己解決できた時には、こちらに方法をシェアさせて頂きます。