Erweiterung Ajax/js Script Slider

[XeTu]

Hallo zusammen,

ich habe hier folgendes Script:

main.js

$(document).ready(function() {
   $('div#slider a:last').addClass('active'); 
    
   $('.slider-control').click(function() {
      var next_slide = $('div#slider a.active').prev();
      $('div#slider a.active').removeClass('active').fadeOut(500);
      
      if(next_slide.length === 0) {
          $('div#slider a:last').fadeIn(500).addClass('active');
      } else {
          next_slide.fadeIn(500).addClass('active');
      }
   });
});

$(document).ready(function(){$("div#slider a:last").addClass("active");$(".slider-control").click(function(){var e=$("div#slider a.active").prev();$("div#slider a.active").removeClass("active").fadeOut(500);e.length===0?$("div#slider a:last").fadeIn(500).addClass("active"):e.fadeIn(500).addClass("active")})});

in HTML sieht es dann so aus:

<div id="slider">
    <a href="#">
        <img src="images/Projekt_6_bababababa.png" />
    </a>
    <a href="#">
        <img src="images/Projekt_5_bababababa.png" />
    </a>
    <a href="#">
        <img src="images/Projekt_4_bababababa.png" />
    </a>
    <a href="#">
        <img src="images/Projekt_3_bababababa.png" />
    </a>
    <a href="#">
        <img src="images/Projekt_2_bababababa.png" />
    </a>

Jetzt habe ich das Problem, dass Script lässt die Bilder mit einem Button

<a class="slider-control">Nächstes</a>

vorwärts laufen
ich will nun noch einen Button <a class="slider-control-back">Zurück</a> einfügen. Was muss am Script angepasst werden um dies zu realisieren?

Danke für eure Hilfe schon mal
Gruß

 

[mambokurt]

Das hat nur bedingt mit Ajax/Js zu tun, IMHO ist das JQuery und so solltest du es auch kennzeichnen, ausser du möchtest die JQuery Funktionen die du da aufrufst kurz mit Quelltext erläutern.
Im Übrigen ist das klar eine legitime Frage für dieses Forum, hinterlässt bei mir aber einen faden Beigeschmack. Das liest sich als ob du fröhlich Copy&Paste gespielt hättest und jetzt keine Ahnung hast von dem was du gebaut hast. Gerade JQuery ist eine angesagte Geschichte, es kann sich für dich nur lohnen dich selbst damit zu beschäftigen, das ist weder Voodoo noch Hexerei und kommt im Einstellungsgespräch meistens gut.

 

[MaverickM]

Hallo zusammen,

ich habe hier folgendes Script:

main.js

$(document).ready(function() {
   $('div#slider a:last').addClass('active'); 
    
   $('.slider-control').click(function() {
      var next_slide = $('div#slider a.active').prev();
      $('div#slider a.active').removeClass('active').fadeOut(500);
      
      if(next_slide.length === 0) {
          $('div#slider a:last').fadeIn(500).addClass('active');
      } else {
          next_slide.fadeIn(500).addClass('active');
      }
   });
});

Du kopierst einfach Zeile 4-6, nimmst eine andere CSS Klasse (Beispielsweise .slider-prev statt .slider-control) und ersetzt das .prev() durch .next().
Siehe auch jQuery API Dokumentation: http://api.jquery.com/?s=.next

Das alles ohne Gewähr... Ausprobieren tu ich das jetzt nicht