19 Schieberegler oder Karussells CSS und HTML für Ihre Website

freie Schieberegler

Indem ich habe Websites, die die gesamte Bildschirmbreite einnehmenWir haben festgestellt, dass bestimmte Elemente integriert werden können, die nützlich sein können, um eine ganze Auswahl von Produkten zum Verkauf oder die Reisen anzuzeigen, die wir möglicherweise für den Sommer anbieten. Karussells oder Schieberegler sind eines dieser Webelemente, mit denen wir unsere Produkte auf sehr auffällige Weise visuell darstellen können.

Die Kostenlose Schieberegler, Scroller oder Karussells in CSS Wie Sie unten finden, stellen Sie ein gutes Repertoire für alle Arten von Zielen bei der Arbeit zusammen, die wir dem Kunden zeigen werden, bevor er unser Budget akzeptiert. Es ist eine Sammlung von Schiebereglern in HTML und CSS mit etwas JavaScript im horizontalen und vertikalen Format. Lassen Sie es uns tun, damit Sie auf den Code zugreifen können, um sie schnell zu implementieren.

Horizontale Karussells

Responsive

Dieses Karussell besteht aus einem ziemlich auffällige Animation Als würden wir einen Vorhang ziehen, um nur die Fotos und Symbole der Profile zu verkleinern, die wir in diesem Schieberegler erstellen werden. Es ist ein perfektes Karussell für Testimonials von Benutzern, die mit den Produkten, die wir im Internet verkaufen, sehr zufrieden sind.

Cupcake-Schieberegler
Verwandte Artikel:
27 HTML- und CSS-Schieberegler verleihen Ihrer Website eine besondere Note

Reaktionsschnelles Karussell

Selbstreproduktion

Dieser Schieberegler ist wie die Werbung, die manchmal gesehen werden kann auf den Fußballfeldern an den Seiten und zeigt verschiedene Anzeigen, die horizontal scrollen. Es ist ideal für Zielseiten, auf denen Markenpartner und andere Arten von Logos angezeigt werden müssen.

Karussell reagieren

3D-Karussell

Diese Schriftrolle zeichnet sich durch seine React.js aus. Dies bietet sich an, um Bilder in einer angemessenen Größe anzuzeigen, wenn wir in einer kontinuierlichen Animation von einem Bild zum anderen wechseln. Zu diesem recht einfachen CSS gibt es wenig mehr zu sagen, aber es ist von großer Wirkung, wenn wir wissen, wie man es richtig im Web positioniert.

Glatter 3D-Schieberegler

3D Karussell

Dieses 3D-Karussell besteht aus HTML, CSS und JavaScript und zeichnet sich durch seine Laufruhe aus Eine springende Animation mit großartiger visueller Wirkung. Mit einer Reihe von Elementen, die jede Karte identifizieren, einem Job und einem auffälligen Karussell, um sie in Ihre Website zu integrieren.

Verwandte Artikel:
46 Javascript-Schieberegler und -Roller

Automatisches unendliches Karussell

Unendliches Karussell

Ein Schieberegler, der, wie der eigene Name warnt, automatisch angezeigt wird ohne dass der Benutzer interagieren muss in kürzester Zeit mit ihm. Die verschiedenen Bilder, aus denen dieses auffällige Karussell besteht, erscheinen aufgrund des Übergangs, in dem es auf magische Weise verblasst.

Schwebekarussell

Schwebekarussell

Mit dem Schwebeelement dies Schieberegler bewegt sich von links nach rechtsoder umgekehrt, wenn wir den Mauszeiger darüber lassen. Ein reibungsloser Übergang zwischen den verschiedenen Fotos, aus denen dieser Bildschieberegler bestehen kann.

Mobiles Karussell

Mobiles Karussell

auch genannt Karussell Material Designund mit dem aktuellen Trend bei allen Arten von Karten, Hier finden Sie einen weiteren Artikel mit einer großen Anzahl davon in CSS / HTML, distanziert sich vom Rest, weil es sich aus der von Google veröffentlichten Designsprache zusammensetzt. Sie können die verschiedenen Karten verschieben, indem Sie lange auf die Karten drücken.

Instagram Feed Karussell

Instagram

Sie können die Idee hinter diesem Hervorhebungsregler zum Absturz bringen durch einen Streifen von Bildern, die vergrößert werden können indem Sie auf einen von ihnen klicken. Eine Animation mit großer Wirkung, obwohl sie für eine bestimmte Art von Website bestimmt ist. Instagram-Beiträge in einem slick.js-Karussell.

Einfaches synchronisiertes Karussell

Einfaches Karussell

Es hat jedoch viel mit dem vorherigen zu tun, insbesondere im Bildstreifen Die Interaktion mit dem Schieberegler ist sehr unterschiedlich indem Sie es mit einer seitlichen Geste von links nach rechts und umgekehrt bewegen. Wieder haben wir slick.js, die seine Sache machen. Auffällig für seine großartige Wirkung.

Horizontale 3D-Karussells

Horizontales 3D-Karussell

Eines der interessantesten Karussells auf der gesamten Liste, die wir veröffentlichen. Steht für Ihre horizontalen Schieberegler in CSS und HTML das bewegt sich fantastisch gut. Sie müssen nur den Mauszeiger über den Feldern lassen, um die verschiedenen Effekte zu finden, die mit den vier Variationen erzielt werden können.

CSS-Karussell

CSS-3D

Einfacher und großartiger visueller Effekt mit a Reihe von Karten, die sich abwechseln auf der Vorderseite. Der Effekt ist in 3D, daher ist es einer dieser Schieberegler, der viel Aufmerksamkeit auf sich zieht, insbesondere aufgrund des minimalen Rückpralleffekts, der den Genie des Erstellers desselben zeigt.

Ambilight Bootstrap Karussell

Bootstrap-Karussell

Ein einfacher Schieberegler mit großer Wirkung, der nicht besonders auffällt. Ist einer von diese einfachen Schieberegler das suchen wir normalerweise und das gibt das Gefühl, eins ohne viel Fanfare zu sein, aber das erfüllt seine Funktion perfekt.

Karussell-Team

Karussellteam

Wenn Sie die Redaktion vorstellen möchten, die Sie im Blog haben, Dieser Schieberegler ist perfekt in seiner Rolle. Gut ähnlich wie beim vorherigen, weil es so einfach ist. Es zeichnet sich durch die Verwendung von Diamanten aus, um jedes Foto des Teams aufzunehmen. Es hat automatische Wiedergabe.

Karussellwürfel

3d Würfel

Schieberegler, der sich als Würfel auszeichnet Jedes der Gesichter ist eines der Bilder oder Fotos, die wir auf einer Website anzeigen möchten. Sie müssen nur auf jeden von ihnen klicken, um einen Bildlauf durchzuführen und herauszufinden, welche Inhalte auf Sie warten.

Karussellpfeiltasten

CSS-Schlüssel

Ein Schieberegler, in dem die Interaktion durchlaufen wird mit den Pfeiltasten. Einfach ohne viel Fanfare, das direkt zu einer anderen Art von Interaktion führt, die wie vor Jahren aussieht. Für eine bestimmte Verwendung.

Vertikale Karussells

Vertikales Karussell

Ein Schieberegler mit einem tollen visuellen Effekt wird automatisch in einer kontinuierlichen vertikalen Animation abgespielt das zeichnet sich durch seine Karten mit abgerundeten Ecken aus. Sehr aktuell und einer von denen, die sich von dieser gesamten Liste abheben.

Reines CSS-Karussell

Karussell

Dieses Karussell zeichnet sich durch eine Seitenmenü, von dem wir gehen können Klicken Sie auf jede der Optionen. Die Informationen erscheinen mit einem gut erzielten Rebound-Effekt ohne viel mehr als das Gesagte.

Vertikales Karussell reagieren

Karussell

Ähnlich wie vorher für seine VertikalitätDieser Schieberegler kann jedoch die gesamte Breite der Seite einnehmen, um die Bilder der einzelnen Registerkarten anzuzeigen. Interessant für sein großes Format und die Verwendung von CSS-Übergängen zum Gleiten zwischen Folien.

3D geteiltes Karussell

Split

Großartiger visueller Effekt mit einem Schiebereglermuster, das sich in 3D mit dreht eine sehr auffällige Animation. Jede der Optionen kann aus dem Menü auf der linken Seite mit Punkten für jede Option ausgewählt werden. Eines der besten auf der Liste, wie kreativ es ist.


Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit *

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.

  1.   Mayra orellana sagte

    Guten Morgen, ich möchte Pure CSS Carousel auf meiner Website verwenden, aber es befindet sich nur an einer Position. Wie kann ich es an der gewünschten Position auf meiner Seite platzieren?

    Bitte Ihre Hilfe dabei. Vielen Dank

  2.   Xaver Canizares sagte

    Wie kann ich dafür sorgen, dass das Schwebekarussell auf der mobilen Version meiner Website gut angezeigt wird?

  3.   Armin sagte

    Ausgezeichnet, was für eine gute Arbeit sie geleistet haben!

  4.   Toni Zambrano sagte

    Hallo, die Remisen sind sehr cool, aber sobald ich es hochlade, kopiere ich es und füge es ein, das Javascrip gibt mir einen Fehler wegen des var max = $ ('# c> li) .lenght…. Was schlägst du vor