Bildkarussell-Generator

Lade Bilder hoch und baue animierte Slider, Karussells und Coverflow-Effekte - dann kopiere den funktionierenden Code

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

One
Two
Three
Four

Export

The address bar hash stores style and settings (not images) so you can share a look.

/* Image slider - generated by 500 Toolbox */
.tb-slider {
  position: relative;
  width: min(100%, var(--w, 860px));
  height: var(--h, 420px);
  margin: 0 auto;
  border-radius: var(--r, 18px);
  background:
    radial-gradient(120% 80% at 10% -20%, rgba(168,85,247,.22), transparent 50%),
    var(--bg, #0b1020);
  overflow: hidden;
  isolation: isolate;
}
.tb-slider.is-shadow {
  box-shadow: 0 28px 64px rgba(0,0,0,.48), 0 0 0 1px rgba(168,85,247,.18);
}
.tb-viewport {
  position: relative;
  width: 100%;
  height
…

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Ein Bild-Slider ist, wie eine Homepage, eine Produktgalerie oder ein Case-Study-Streifen tatsächlich gesehen wird. Dieser Generator lässt dich eigene Fotos einfügen, einen Bewegungsstil wählen (klassisch, Fade, Coverflow, Cube, gestapelte Karten und mehr) und dann Tempo, Pfeile, Punkte und Autoplay justieren, während eine Live-Vorschau aktualisiert. Wenn es richtig aussieht, kopiere HTML, CSS und JavaScript, das auf jeder Site läuft, oder lade ein ZIP herunter. Nichts wird hochgeladen. Demo-Slides sind dabei, damit du Stile ausprobieren kannst, bevor du Dateien hinzufügst.

So verwendest du dieses Tool

  1. Bilder hinzufügenNutze die Demo-Slides oder lade eigene hoch. Ziehe Thumbnails zum Umsortieren, ersetze eines oder lösche es.
  2. Slider-Stil wählenKlassisch, Fade, 3D-Karussell, Coverflow, Cube, Split, Zoom und der Rest. Jede Änderung aktualisiert die Vorschau.
  3. Bewegung und Chrom justierenSetze Größe, Radius, Abstand, Tempo, Autoplay, Pause bei Hover, Loop, Pfeile und Punkte.
  4. Code kopieren oder herunterladenKopiere HTML, CSS, JavaScript oder eine komplette Seite. ZIP- und JSON-Config sind ebenfalls verfügbar.

Warum es nutzen

  • Siebzehn Slider-Stile inklusive Coverflow, Cube und gestapelten Karten.
  • Live-Vorschau mit Desktop-, Tablet- und Mobil-Rahmen.
  • Funktionierender Export: füge das Snippet in jede statische Seite oder jedes Framework ein.
  • Dateien bleiben im Browser. Kein Konto und kein Wasserzeichen.

Häufige Anwendungen

  • Ein Homepage-Hero, der Kampagnenfotos durchwechselt.
  • Eine Produktgalerie mit Pfeilen und Punkten.
  • Ein Case-Study-Coverflow für ein Portfolio.

Tipps für bessere Ergebnisse

  • Starte mit Fade oder klassisch, dann probiere Coverflow, sobald die Fotos drin sind.
  • Halte Autoplay langsamer, als du denkst. Zweieinhalb Sekunden sind ein besseres Default als eine.
  • Exportiere vollständigen Code, wenn du eine einzelne HTML-Datei auf einem Host ablegen willst.

Häufig gestellte Fragen

Nein. Bilder werden in deinem Browser gelesen. Das exportierte HTML bettet sie als Data-URLs ein, oder du kannst nach dem Export eigene Dateipfade einsetzen.

Ja. Kopiere vollständigen Code für eine eigenständige Seite, oder kopiere HTML, CSS und JavaScript getrennt in dein Projekt.

Ja. Einstellungen sind schlichte CSS-Variablen und ein data-style-Attribut. Du kannst den Generator auch wieder öffnen und erneut exportieren.

Ja. Der Slider-Generator läuft in deinem Browser ohne Anmeldung und ohne Wasserzeichen auf dem Code.

Related guides