On clicking on (independent) next/previous arrows I would like to shift a group/row of 5 images (each 660px x 372px) by their own width (660px) to the right/left.
Since I have 5 images it should allow just two clicks in each direction.

This version is as close as I have gotten:

I used WowSlider and different instances of the same image group. Problem: large images (loading time) and not a smooth transition by image width in one direction, it skips images and jumps forth and back.

Images can be grouped/hold in a div container or an unsorted list like this:
HTML Code:
<body><div id="imagewrapper"><ul class="images"><li class="image1"><img src="images/groupe1/img1.png" width="548" height="372" alt="img1" /></li><li class="image2"><img src="images/groupe1/img2.png" width="548" height="372" alt="img2" /></li><li class="image3"><img src="images/groupe1/img3.png" width="548" height="372" alt="img3" /></li><li class="image4"><img src="images/groupe1/img4.png" width="548" height="372" alt="img4" /></li><li class="image5"><img src="images/groupe1/img5.png" width="548" height="372" alt="img5" /></li></ul></body>
or it can be just one long image comp like that:

HTML Code:
<body><div id="imagewrapper"><img src="images/imggroup.jpg" width="3348" height="372" alt="imggroup1" /></div></body>
No swap or hide, I just literally want the whole group to move.

I'm a Javascript novice. Tried Javascript and jQuery plugins, image sprite and sliding door techniques. There must be a simple light-weight solution, maybe even just CSS only but I can't figure it out.

Please help!!