jQuery - Daten eines ImageSliders mit Ajax laden

Janosch79 · 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);
}
});
});

webEdition - Forum

jQuery - Daten eines ImageSliders mit Ajax laden

jQuery - Daten eines ImageSliders mit Ajax laden

Wer ist online?