Einfache Slideshow erstellen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Jjaxi

Neues Mitglied
5 Februar 2018
6
0
1
56
Hallo liebes Forum,

wie läßt sich eine einfache Slideshow erstellen. Habe schon viele Beispiele probiert, aber es funktioniert nicht.

Liebe Grüße
Jaxi
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Also google schmeist da so viele Beispiele raus .Aber zur Vorsicht habe ich dir aus ein Beispiel eine Fiddle gemacht .Ist sogar Simpel zum nachbauen https://jsfiddle.net/basti1012/yuh2b4s5/

und das geiche nochmal mit automatischer Slideshow

https://jsfiddle.net/basti1012/yuh2b4s5/1/

Hier mit Effekten und Schrift einblendung

https://jsfiddle.net/basti1012/yuh2b4s5/2/

etwas komplizieter

https://jsfiddle.net/basti1012/yuh2b4s5/5/

und eine ohne Javascript
automatisch
https://jsfiddle.net/basti1012/yuh2b4s5/4/
Manuel
https://jsfiddle.net/basti1012/yuh2b4s5/6/


So das wahren genug Beispiele.
Du kannst aber auch Lightboxen oder Fancyboxen nutzen.Die können das fast alles auch .Je nachdem was du genau vor hast
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Da hast du dir die einfachste Variante ausgesucht.
Wenn du den Code Kopierst und in einer html Datei Speicherst sollte es so auch laufen
hier der Code.
Code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

 <script>
 var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
 </script>
</body>
</html>
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
73
Es waere schoen, wenn man aus Verzeichnisse und Unterverzeichnisse auslesen kann. Diese einfache Loesung entspricht meine Beduerfnisse.Jedoch habe ich kein Lust fuer mehrere hundert photos, deren Location einzutragen
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
das geht auch. Aber dazu brauchst du Php.
Php liest dann dein Verzeichniss aus und dann kann man das auch nutzen ohne das du die Links eintragen mußt. Das gute daran ist wenn du neue Fotos in das Verzeichniss kopierst werden die Im Script gleich mit übernommen
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
73
Danke fuer eure Antworte. Aber ich suche eine Lösung der direkt auf ein Rechner laeuft ohne Internetverbindung. Also nur HTML und Javascript. Nur Rechner mit den Bilder.
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Mit Javascript hast du keinen Zugriff auf deinen Rechner .
Wenn das sowieso bei dir zuhause ohne Internet laufen soll dann kannst du die Bilder auch ohne Browser öffnen.

Einige Browser können auch Ordner lesen . Dazu ziehst du den Ordner einfach ins Browser Fenster rein und dann bekommst du eine Liste was für Bilder da drinne sind .

Dann könte man Theoretisch mit Greasemonkey eine Slideshow laufen lassen, die auch ohne Internet laufen müßte.

Aber wie gesagt ,da es für dich alleine zuhause sein soll , solltest du ein normales Programm dafür nutzen.
Die spielerein mit Browser und Javascript machen da kein sinn finde ich, dafür gibt es genug Slideshow Programme
 

gerozing

Neues Mitglied
6 Juli 2019
3
0
1
73
Danke wiederum fuer die schnelle und informative Antwort. Die Situation ist etwas banal. Die Slideshow findet in einem oefentlichen Lokal statt aber ohne LAN Anschluss. Statt die Bilder aller ueber mein Account mit LTE zu schicken, haette ich sie lieber dabei. Ich schaue mir Grease Monkey an. Sonst bleibt mir nur ein Fertigprogram wie Movavi was erheblichen Aufwand mit sich bringt.

Danke noch mal fuer Deine positive Einstellung zu diesem Thread

GR
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.007
380
83
67
Sonst bleibt mir nur ein Fertigprogram wie Movavi was erheblichen Aufwand mit sich bringt.
Manche Bildbetrachter bieten auch die Möglichkeit, Slideshows zu erstellen, Irfanview und Faststone z. B. Wahrscheinlich eingeschränkt in den Möglichkeiten zur Gestaltung, aber vielleicht eine Möglichkeit.
 

HaTeMLchallenge

Neues Mitglied
3 August 2020
5
0
1
Karlsruhe
Hallo vom Neuen hier im Forum und erstmal besten Dank an @basti1012 für die tollen Slideshow-Beispiele!
Nutze die Coronabedingte Kurzarbeit, endlich mal html zu lernen und bin gerade dabei meine erste Website zu erstellen (für meine Frau).

Und da sind wir schon bei meinem Problem: Wie kriege ich es hin, dass der Inhalt der Seite im Anschluss der Slideshow angezeigt wird, und nicht darunter liegt? Über „margin“ klappt das grundsätzlich, aber wenn es beim hochformatigen Viewport passt dann ist beim querformatigen Viewport ein viel zu großer Abstand zwischen der Slideshow und der grünen Fläche mit dem #statement. Wie geht das?

Herzlichen Dank für eine Antwort,
Ralf

Hier der Link zur html-Datei:
https://filehorst.de/d/dGwqnfgn
 

basti1012

Senior HTML'ler
26 November 2017
1.395
144
63
39
Minden
sebastian1012.bplaced.net
Werbung: