两个图像滑块

Question

我正在制作旋转木马。我需要这样做，所以我有两个并排的图像。当您单击右箭头切换它们时，我需要向左移动右图像，并使用新图像来取代正确的图像。然后，当您单击左键时，它将向后移动。我不需要动画或任何东西。以下是概念图。 （轮播将是页面宽度的100％，因此每个显示的图像需要50％宽。）

这是我到目前为止编码的内容..在我的项目中我也使用Bootstrap和Wordpress。

<div class="wrapper">

<ul class="dual-slider">

    <li><a href="#"><img src="http://placehold.it/350x150" /></a></li>

    <li><a href="#"><img src="http://placehold.it/350x150" /></a></li>

    <li><a href="#"><img src="http://placehold.it/350x150" /></a></li>

    <li><a href="#"><img src="http://placehold.it/350x150" /></a></li>

    <li><a href="#"><img src="http://placehold.it/350x150" /></a></li>

</ul>

</div>

http://jsfiddle.net/BrandonRhino/qaxu6un1/5/（编辑新链接）

我是javascript的新手，并且不知道如何开始，如果有人可以帮我指出正确的方向或帮助我，我会感激不尽！