jQuery Slideshow von div-Hintergrund

Also ich hätte sowas hier

Code:

---

<script>
var images=new Array('wasser1.jpg','wasser2.jpg','wasser3.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.apfel')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(5000,function(){
        setTimeout(doSlideshow,2000);
    });
}
</script>

---

und hätte gerne Übergänge wie hier: http://rewish.github.io/jquery-bgswitcher/ (leider führt letzteres zu einem Bug in meinen Bootstrap Menü; das obige Beispiel funktioniert aber)
Was muss ich (kaum Ahnung von jQuery) da möglichst einfach tun?

Technisch kannst du alle Übergänge, die gleichzeitig 2 Bilder anzeigen (z.B. überblenden durch Ändern der 'Durchsichtigkeit') nur erreichen, wenn du auch beide Bilder in irgendwelchen Elementen plazieren kannst. Mit nur einem div wird dir das nicht gelingen.
Das hat nichts mit jQuery zu tun.

Doch, die fadeIn, fadeOut, fadeTo Funktionen sind doch von jQuery? Und ja, mit nur einem "div" müsste das klappen. Ich hab ja hier den Test laufen mit einem div ("platzhalter"): URL jetzt entfernt (bitte die Seite nicht zitieren, ich möchte sie später wieder rausnehmen. Das blöde ist halt, dass das Menü in der Mobilen Version sich über das "div" schiebt, was ohne das Skript und nur einem Background-Bild nicht passiert.
Jemand eine Idee?

PS: das hier ist der Code aus dem nicht funktionierenden Beispiel (jquery.bgswitcher.js ist aus Link aus Eingangspost)

Code:

---

<script src="files/sevaa/theme/jquery.bgswitcher.js"></script>
<script>
$(".platzhalter").bgswitcher({
  images: ["files/sevaa/theme/wasser1.jpg", "files/sevaa/theme/wasser2.jpg", "files/sevaa/theme/wasser3.jpg"],
  interval: 5000,
  duration: 2000
});
</script>

---

In der Demo sind zwei DIVs ineinander, die unterschiedliche Bilder anzeigen.
So kann dort übergeblendet werden.
Beide sind position:absolute.

Ja gut, ich bin etwas ahnungslos. :D
Also es hört sich danach an, dass wegen dem "absolute" das leider nicht funktionieren kann, dass die Bilder in der Smartphone-Version mit nach unten geschoben werden? Oder könnte es doch eine Lösung geben?

Wenn es immer die selben Bilder sein sollen und du deshalb im Backend keine Eingabemaske brauchst, ist das sicherlich fix erstellt.
Erstelle dazu einen "kleinen Auftrag".
Ich würde es machen, aber alle sollen die Gelegenheit dazu bekommen.

Ja, es sollen nur die 3 Bilder sein und können manuell im Template / Skript eingebunden werden.

Bei einer so begrenzten Anzahl von Bildern kann man das auch rein mit css machen. Habe ich bei dieser Seite mal realisiert. https://www.reinerzau.de/

Zitat:

---

Zitat von mlweb

Bei einer so begrenzten Anzahl von Bildern kann man das auch rein mit css machen. Habe ich bei dieser Seite mal realisiert. https://www.reinerzau.de/

---

Würde denn da dieser "Fehler" mit dem Menü nicht auftreten, so wie du das implementiert hast? (dann täte ich mir deine Lösung nämlich mal genauer ansehen)

Zitat:

---

Zitat von TS84

Das blöde ist halt, dass das Menü in der Mobilen Version sich über das "div" schiebt, was ohne das Skript und nur einem Background-Bild nicht passiert.

---

Was genau ist dein Problem? Das mobile Menü überdeckt fast die gesamte Seite, aber das muss ja auch so gewollt sein.

Das Problem ist, dass das Bild nicht mit nach unten geschoben wird, wie hier: URL jetzt entfernt
Edit: oh, ich merke gerade, dass es auf meinem Android (mit Firefox und Chrome) doch klappt wie es soll. Hingegen auf dem Desktop, wenn ich z.B. mit Strg+Shift+M im Firefox teste, funktioniert es nicht. :eek:

Edit2: scheint doch hinreichend zu funktionieren. zur Not nehmen wir bei mobiler Version evtl. einfach keine Slideshow. Danke für die Antworten.