Pfeile statt Zahlen in einem Slider

  • Hallo ihr,

    ich habe in meine Website mit Hilfe einer Codevorlage einen Slider eingefügt. Der Slider hat als Griffe im unteren Bereich die Zahlen "01" und "02"


    ich möchte aber, dass es stattdessen ein Pfeil nach links bzw. ein Pfeil nach rechts ist.

    Der JS Code sieht so aus:


    Im HTML Code ist nur der Teil zu sehen:

    Ich wäre so dankbar wenn mir jemand helfen könnte, da ich mich mit Javascript leider kaum auskenne...
    Ich habe versucht die Zahlen im JS Code durch HTML Kürzel zu ersetzen, aber das hat leider nicht funktioniert...

    Danke schonmal !

    Liebe Grüße

    Sundream

  • Das ist eine seitenweise Navigation zwischen den Bildern des Sliders. Sie durch Pfeile zu ersetzen macht wenig Sinn. Was ist denn wenn Du mehr als 2 Bilder in der Galerie hast? Dann würde da nur Pfeile zu sehen sein mit denen niemand etwas anfangen kann.

  • Hallo threadi,

    der Slider wird definitiv immer nur 2 Bilder enthalten, weswegen ich das umbauen möchte. Hättest du dann dafür eine Lösung? :)

    Danke schonmal,
    Liebe grüße

    Sundream

  • Doch brauche ich schon, weil der Text sich immer rüber "slided" und dabei das Bild wechselt.
    Ich habe aber eigentlich auch nach einer Lösung gefragt wie man die Zahlen zu Pfeilen macht und nicht ob ich einen Slider brauche oder nicht.......

  • Habe mich mal versuch.

    CSS

    6 Mal editiert, zuletzt von djheke (24. Mai 2016 um 12:59)

  • Hallo,

    irgendwie klappt das mit den Pfeilen bei mir nicht so gut... Die sehen irgendwie komisch aus hier ein Bild :

    hast du zufällig eine Idee woran das liegen könnte?

    Danke schonmal !

    Liebe Grüße

    Sundream

  • Na hast du auch deine Funktion geändert? Es sieht so aus, als sind bei dir noch Reste der Nullen zu sehen.

    function createSliderPagination(container){
    var wrapper = $('<ol class="cd-slider-navigation"></ol>');
    container.children('.cd-slider').find('li').each(function(index){
    var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
    dot = $('<a href="#0"></a>').appendTo(dotWrapper);
    dotWrapper.appendTo(wrapper);
    //var dotText = ( index+1 < 10 ) ? '0'+ (index+1) : index+1; <--ORIGINAL
    var dotText = ( index+1 < 10 ) ? (' ') : index+1; // <--GEÄNDERT
    dot.text(dotText);
    });
    wrapper.appendTo(container);
    return wrapper.children('li');
    }


    Es würde auch ohne diese Änderung gehen, aber so ist es am einfachsten.

    Hier die only CSS Variante

    2 Mal editiert, zuletzt von djheke (27. Mai 2016 um 09:52)

  • Also irgendwas hab ich falsch gemacht, keine Ahnung, jetzt gehts aufjedenfall hab das was du geschrieben hast nochmal eingesetzt und jetzt passts, vielen Dank !