CSS 3 Img Slider ohne JS, Problem mit overflow

Hallo alle zusammen!

Ich habe folgendes Problem, was ich weder mit google noch meiner Literatur gelöst bekomme.
Für meinen Webshop möchte ich auf der Startseite unten eine Produktgalerie, "empfohlene Produkte".
(vgl. zalando.de "Topseller des Tages")

Mit nem Pfeil jeweils links und rechts soll man zu den nächsten 5 Produkten kommen (sollen seitlich reingefahren kommen).

Soweit weiß ich auch wie mit der Animation unter CSS3 funktioniert, ich hänge aber schon an was anderem.

Ich hab mir gedacht, die Produkte kommen in einen Container mit overflow:hidden. Der Container soll 15 Produkte enthalten, aber nur 5 sichtbar.
Blöd nur, dass die "überflüssigen" Produkte nicht nach rechts weiter dargestellt werden (display:inline; hat hier nicht geholfen), sondern in die nächste Zeile gehen, was nicht Sinn der Sache ist.

Hier mal etwas Code:

<!-- GesamtContainer für die Navigationspfeile seitlich und die "Gallery" in der Mitte -->
<div id="containerGallery">
    <div id="arrowLeft"></div>

        <div id="containerProducts">
                 <div class="product"></div>
                 <div class="product"></div>
                </div>

    <div id="arrowRight"></div>




</div>

Ich hoffe, das ist soweit verständlich.

mfG,
Wuselpuff

Hallo nochmal!
Die Tipps haben mir zwar enorm weitergeholfen, jedoch bin ich an die Grenzen der meisten Img-Slider geraten, weil viele nur mit Bildern funktionieren, nicht aber mit <div> Elementen, die dann jeweils wieder <div> Elemente und Bilder etc enthalten. Musste dann doch auf JS zurückgreifen.

Ich steh hier jetzt eig. auch schon vor der Lösung, nur eine Kleinigkeit fuchst mich noch ohne Ende: Die "nächste" und "vorherige" Buttons.
Hier der Code:

<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>

Das ist der ORIGINAL-Code aus der fertigen Galerie.
Im Code steht, lass dir die Buttons automatisch erzeugen, oder nutze deine eigenen (brauch ich).
Füge deinen Buttons einfach nur class="slidesjs-next slidesjs-navigation" zu und es geht. Leeeider nicht.

Beim href="#" springt er an den Seitenanfang und führt kein JS aus. Dabei nutze ich exakt den gleichen Code wie vorgegeben.
Hab sogar mit Firebug getestet: Wenn ich den Code vom funktionierenden Button nehme, ausschneide und direkt an der gleichen Stelle einfüge, gehts nicht. Was ist denn da faul?
Im Original gehts mit href="#", wenn ichs haargenau so nutze nicht, wtf?

Also bitte... nicht gleich so unfreundlich.
Wie beschrieben, ist das hier KEIN JS Problem. Der Code macht was er soll, wenn ich die durch JS erstellten Buttons verwende. Und die sehen so aus wie im Code-Zitat oben beschrieben.
Was dann als JS durchgeführt wird, ist erstmal egal. Es funktioniert ja.
Es wundert mich nur, dass wenn ich einen Anker selbst mit der exakt gleichen Klasse setze, nichts passiert, außer dass er an den Anfang springt. Es wird also der Link ausgeführt, aber nicht der mit der Klasse verbundene Code.

Das extremste ist ja, dass ich den obigen Originalcode mit Strg + X und Strg + V einfach mal ausgeschnitten und wieder an der gleichen Stelle eingefügt hab (Firebug/Chrome) und plötzlich funktioniert auch der Original-Anker nicht mehr, obwohl haargenau der gleiche Ausdruck da steht wie vorher. Das macht in meinen Augen gar keinen Sinn. Wie kann es sein, dass der gleiche Code unterschiedliche Rückgabewerte erzeugt?

Anmerkung: Ich nutze den Slider von SlidesJS.com

Hat sich soeben erledigt.
Für die, die den Slider auch nutzen wollen:

Die Steuerungsbuttons für die Slideshow müssen unbedingt ein child vom Element mit der ID="slides" sein, sonst funktionierts nicht.
Der JS Code greift über den Slides-Container auf die Buttons zu.