Nivoslider Pfeile außerhalb des Sliders positionieren

Auf der Suche nach einer geeigneten Lösung die Pfeile des Nivosliders außerhalb des Sliders zu platzieren musste ich mich durch unendlich viele Foren klicken und keiner hatte eine halbwegs praktikable Lösung zu bieten. Das zu slidende Bild in seiner Größe zu verkleinern war ein Ansatz, aber auch das hat nicht funktioniert. Das overflow des Sliders auf :visible zu setzen funktioniert auch nur bedingt und hat Einfluss auf den Rest nach dem Slider. Schließlich musste ich mich dazu durchringen das Problem per Javascript zu lösen.

Füge folgenden Code unterhalb des Sliders ein:

Was macht dieser Code-Schnipsel?

Mit insertBefore() fügen wir 2 Divs vor dem Slider ein, welche die Funktion der alten Pfeile übernehmen. Durch trigger(‚click‘) erzeugen wir einen Klick auf die alten Pfeile, sodass die Funktionalität weiterhin gegeben ist. Die neuen Pfeile verstecken sich nun in den Divs mit der Klasse nivo-custom-left_arrow bzw. nivo-custom-right_arrow und können platziert und einzeln gestylt werden. Die alten Pfeile müssen per CSS ausgeblendet werden (display: none) und schon haben wir unsere neuen Pfeile außerhalb des Sliders.

Vorraussetzungen

– Eingebundener Nivoslider
– jQuery

 

Felix

 

3 Gedanken zu „Nivoslider Pfeile außerhalb des Sliders positionieren

  1. Tach tach,

    wie hast du das eigentlich hinbekommen? Mein Code:

    und in css:

    Die Seite: http://dev.scavi-ray.npire.de/

    Wie du siehst, habe ich den Code unterhalb und in der aufrufenden Funktion geschrieben, aber die Pfeile erscheinen einfach nicht außerhalb des Sliders, kannst du mir weiterhelfen?

  2. Hi hi,

    ich habe eine Methode gefunden. Man muss das übergeordnete div.nivoSlider in der nivo-slider.css (Zeile 15) von overflow: hidden; auf overflow: visible; ändern. Dann muss man in der default.css die left- bzw. right-Werte einen genügend großen negativen Wert bei .theme-default a.nivo-nextNav bzw. .theme-default a.nivo-prevNav angeben. Meiner Meinung nach läuft alles glatt; zu sehen auf http://dev.scavi-ray.npire.de/ . Und das ganze ohne zusätzliches jQuery. Kannst du mal gucken ob du noch irgendwelche Fehler hierzu findest.

    Gruß Karsten

  3. Hallo Karsten, für deine Zwecke reicht die Anpassung soweit wohl. Der Slider kann sich optional auch in der Breite verändern, es wäre interessant ob dann ein overflow auch reicht, oder ob man dann doch wieder „drumherum“ bauen muss.

    Danke für deinen Verbesserungsvorschlag.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.