如何在不同宽度的Cycle2中修复幻灯片？

Question

我有不同幻灯片的幻灯片。当我使用按钮浏览幻灯片时，幻灯片放置不正确。这是我的代码。我还制作了一个jsfiddle来证明这种行为。

<div>
  <button onclick="goto(0)">
    Slide 1
  </button>
  <button onclick="goto(1)">
    Slide 2
  </button>
  <button onclick="goto(2)">
    Slide 3
  </button>
  <button onclick="goto(3)">
    Slide 4
  </button>
</div>
<div style="width:300px">
  <div id="slider"
       data-cycle-fx="carousel"
       data-cycle-timeout="0"
       data-cycle-slides="> div">
    <div style="width:200px;background:red;">
      slide 1
    </div>
    <div style="width:110px;background:blue;">
      slide 2
    </div>
    <div style="width:80px;background:green;">
      slide 3
    </div>
    <div style="width:230px;background:yellow;">
      slide 4
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
    $("#slider").cycle();
});

function goto(number){
    $("#slider").cycle('goto', number);
  return false;
}
</script>

首次单击幻灯片1，然后滑动2，滑动3并最终滑动4时，一切都按预期工作。但是当您刷新页面时，例如单击幻灯片2然后滑动1，您会看到幻灯片1位置不正确。

我该怎么做才能解决这个问题？

注意：我想保留每张幻灯片的宽度。我不想让每张幻灯片长度相同。