Slide with different widths gets out of position

[martijngr]

When having this setup, the slides aren't positioned correctly. Here is the code. I also made a jsfiddle to demonstrate this behavior.

<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>

When first clicking slide 1, then slide 2, slide 3 and finally slide 4, everything works as expected. But when you refresh the page and for example click slide 2 and then slide 1, you see that slide 1 is out of position.

What can I do to fix this?

NOTE: I want to preserve the width of each slide. I don't want to make each slide the same length.