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:

<script type="text/javascript">
$(document).ready(function() {
    // new arrow containers
    $('<div class="nivo-custom-left_arrow">left</div>').insertBefore($('#slider'));
    $('<div class="nivo-custom-right_arrow">right</div>').insertBefore($('#slider'));

    // register custom click to trigger real click
    $('.nivo-custom-left_arrow').click(function() {
        $("#slider a.nivo-prevNav").trigger('click');
    });

    $('.nivo-custom-right_arrow').click(function() {
        $("#slider a.nivo-nextNav").trigger('click');
    });
});
</script>

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