Web-Entwicklung es wird immer beliebter, und in der heutigen Welt sind Websites zu einem integralen Bestandteil des täglichen Lebens geworden. Schieberegler oder Karussells sind eines der beliebtesten Designelemente, mit denen Sie Inhalte bequem auf Webseiten anzeigen können. Normalerweise werden Schieberegler mit JavaScript implementiert, aber in diesem Artikel werden wir uns ansehen, wie Sie einen Schieberegler nur mit HTML und CSS erstellen.
HTML und CSS - dies sind die wichtigsten Markup- und Stilsprachen für Webseiten. Wenn wir nur diese Sprachen verwenden, können wir sehr schöne und funktionale Schieberegler erstellen, ohne auf die Verwendung von JavaScript zurückgreifen zu müssen.
Vorteile der Verwendung eines Schiebereglers in HTML und CSS ohne JavaScript es geht darum, die Leistung zu verbessern und Geräte ohne JavaScript-Unterstützung zu unterstützen. Darüber hinaus bietet dieser Ansatz eine zuverlässigere und stabilere Leistung, da keine zusätzlichen Skripts und Abhängigkeiten erforderlich sind.
Daher ist das Erstellen eines Schiebereglers ohne JavaScript eine großartige Möglichkeit, um eine hervorragende visuelle Darstellung Ihrer Inhalte zu erhalten und eine bessere Benutzererfahrung zu bieten, ohne zusätzliche Ressourcen zu benötigen.
Wie mache ich einen Schieberegler ohne JavaScript in HTML und CSS
Das Erstellen eines Schiebereglers ohne JavaScript mag eine entmutigende Aufgabe sein, ist aber eigentlich überhaupt nicht der Fall. In diesem Handbuch zeigen wir Ihnen, wie Sie dies mit HTML und CSS tun können.
Erstellen Sie zuerst einen Container für den Schieberegler mit einem Tag . Legen Sie die gewünschten Stile fest, damit sie eine bestimmte Breite und Höhe sowie eine bestimmte Hintergrundfarbe haben.
Als nächstes müssen Sie separate Folien innerhalb des Containers erstellen. Jede Folie muss mit einem Tag als separater Block dargestellt werden . Legen Sie die gewünschten Folien so fest, dass sie zentriert ausgerichtet sind und bestimmte Abmessungen aufweisen.
Damit der Schieberegler funktioniert, müssen Sie die Möglichkeit hinzufügen, zwischen den Folien zu wechseln. Dazu können Sie die Radio-Buttons mit einem Tag verwenden und Eigenschaft checked. Jede Schaltfläche entspricht einer separaten Folie.
Sie können die Eigenschaft verwenden, um eine Übergangsanimation zwischen den Folien zu erstellen transform und seine Bedeutung translateX(). Dadurch können Sie die Folien horizontal verschieben.
Schließlich können Sie die Animation mithilfe der Eigenschaft verwenden, um den Schieberegler automatisch zu wechseln @keyframes und fügen Sie es dem Schieberegler-Container hinzu.
Das ist alles! Jetzt haben Sie einen einfachen Schieberegler ohne JavaScript, mit dem Sie Inhalte oder Bilder auf Ihrer Website anzeigen können.
Schritt 1: Erstellen eines Slider-Markups
Bevor wir mit dem Styling des Schiebers beginnen, müssen wir ein grundlegendes Markup für den Schieber erstellen. Dazu verwenden wir HTML.
Erstellen wir einen Container für den Schieberegler. Dazu verwenden wir ein Element mit einer bestimmten Klasse oder ID, um es weiter zu stylen:
Wir benötigen auch einen Folienbehälter. Wir verwenden ein Element und eine nummerierte Liste für jede Folie:
Jetzt hat unser Schieberegler ein grundlegendes Markup. Im nächsten Schritt werden wir eine Stilisierung hinzufügen, um sie interaktiv und ansprechend zu gestalten.
Schritt 2: Anwenden von Stilen auf den Schieberegler
Legen wir die Klasse "slider" für dieses Element fest, um in Stilen darauf zugreifen zu können:
Als nächstes erstellen wir einen inneren Wrapper für die Folien, indem wir ihm die Klasse "slider__wrapper" zuweisen:
Erstellen Sie nun Stile für jede Folie innerhalb des Wrappers:
Um die Folien horizontal zu positionieren, fügen Sie die Eigenschaft "flex-direction" mit dem Wert "row" dem inneren Wrapper hinzu:
Um nur eine Folie innerhalb des Containers anzuzeigen, blenden wir die anderen aus, indem wir die Eigenschaft "overflow" mit dem Wert "hidden" verwenden:
Auf diese Weise können Sie mit diesen Stilen einen Schieberegler erstellen, ohne JavaScript zu verwenden.
