jQuery - Daten eines ImageSliders mit Ajax laden

Fragen zu JavaScript.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
Janosch79
Junior Member
Beiträge: 1
Registriert: Di 19. Mai 2020, 12:36

jQuery - Daten eines ImageSliders mit Ajax laden

Beitragvon Janosch79 » Di 19. Mai 2020, 12:52

Hallo,

ich bin ganz neu im Forum und habe ein Problem mit jQuery (da bin ich noch ein Anfänger!).

Folgendes Projekt muss ich bearbeiten: Bau einer Bildergalerie, deren Daten mit Ajax geladen werden; also laden, auslesen und zur Anzeige bringen.

Den Slider und die zugehörige js-Datei habe ich hinbekommen, aber bei Ajax fehlt mir die Erfahrung und das nötige Wissen, um es richtig umzusetzen. Wahrscheinlich keine so schwierige Aufgabe, aber vielleicht kann mir jemand helfen?

Mein HTML:
<body>
<div class="container">
<h1 class="text-muted">jQuery Slider</h1>
<div class="slider-outer">
<img src="img/arrow-left.png" class="prev" alt="Previous">
<div class="slider-inner">
<img src="img/schwarz1.jpg" class="active">
<img src="img/schwarz2.jpg">
<img src="img/schwarz3.jpg">
<img src="img/schwarz4.jpg">
<img src="img/schwarz5.jpg">
<img src="img/schwarz6.jpg">
</div>
<img src="img/arrow-right.png" class="next" alt="Next">
</div>
</div>
</body>
</html>

Mein jQuery:

$(document).ready(function(){
$('.next').on('click', function(){
var currentImg = $('.active');
var nextImg = currentImg.next();

if(nextImg.length){
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index', 10);
}
});
$('.prev').on('click', function(){
var currentImg = $('.active');
var prevImg = currentImg.prev();

if(prevImg.length){
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
});
});

Zurück zu „JavaScript“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste