Wie erstelle ich mit Hilfe von CSS ein Karussell?-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Was ist ein Karussell?

Responsive Carousel using CSS

Heim

Web-Frontend

CSS-Tutorial

Wie erstelle ich mit Hilfe von CSS ein Karussell?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 12:33 PM

Wie erstelle ich mit Hilfe von CSS ein Karussell?

Carousel ist im Internet sehr berühmt. Web Carousel ist eine elegante Möglichkeit, ähnliche Inhalte an einem greifbaren Ort zu organisieren und gleichzeitig wertvollen Platz auf der Website zu bewahren. Sie werden verwendet, um Fotos anzuzeigen, Produkte anzubieten und das Interesse neuer Besucher zu wecken. Aber wie effektiv sind sie? Es gibt viele Argumente gegen Karussells sowie Untersuchungen zur Verwendung von Karussells zur Leistungssteigerung. Aber wie wirken sich Karussells auf die Benutzerfreundlichkeit einer Website aus?

In diesem Artikel besprechen wir die Grundlagen von Karussells und wie man sie mit HTML und CSS erstellt.

Was ist ein Karussell?

Ein Karussell ist eine Diashow, die eine Reihe rotierender Banner/Bilder anzeigt. Karussells erscheinen normalerweise auf der Startseite einer Website. Es verbessert das Erscheinungsbild Ihrer Website. Webkarussells, auch bekannt als „Slider, Galerien und Diashows“ ermöglichen Ihnen die Anzeige von Text, Grafiken, Bildern und sogar Videos in einem dynamischen „Sliding“-Block. Sie sind eine ausgezeichnete Designwahl für die Gruppierung von Inhalten und Konzepten und stellen visuelle Verknüpfungen zwischen bestimmten Inhalten her. Web-Karussells sind daher ideal, um relevante Produkte auf E-Commerce-Websites zu bewerben, ausgewählte Projekte in einem Design-Portfolio zu präsentieren oder sogar Innen- und Außenfotos von Häusern auf einer Immobilien-Website in einer Schleife zu präsentieren. Allerdings sind sie nicht immer die beste Wahl.

Viele Designer kritisieren sie dafür, dass sie die Ladezeiten verlangsamen und den Designfluss ruinieren. Allerdings können Web-Karussells, wie alles, was mit Design zu tun hat, Inhalte auf eine Art und Weise aufteilen, die das Durchsuchen erleichtert, wenn sie richtig durchgeführt werden.

Wie erstelle ich ein Webseitenkarussell?

Hier erfahren Sie, wie Sie ein einfaches Webkarussell erstellen, ohne ein Framework wie Bootstrap zu verwenden.

Schritte, die Sie befolgen müssen

Verwenden Sie HTML, um die Grundstruktur der Drehlaterne zu erstellen, die Bilder enthält. Im folgenden Beispiel haben wir der Drehtür 4 Bilder hinzugefügt. Darüber hinaus gibt es 4 Schaltflächen, bei deren Anklicken das entsprechende Bild angezeigt wird.

Erstellen Sie zunächst ein div-Element als Container, das
und
content enthält.
Jetzt enthält das Div „Inhalt“ zwei Teile: „Karussellinhalt“ (enthält den Textteil, der während des Übergangs unverändert bleibt) und „Diashow“ (enthält den beweglichen Teil, d. h. die 4 Bilder und Schaltflächen).
Verwenden Sie CSS, um Karussellbilder und -schaltflächen zu gestalten. Behalten Sie die Position der Folie als relative Positionierung bei. Verwenden Sie CSS-Animationen, um Bilder in Ihrem Karussell reibungslos zu überblenden.
Beispiel
lautet:
Beispiel

Das folgende Beispiel zeigt ein Karussell mit 4 Bildern und einer Schaltfläche, die die Anzeige der Bilder steuert. Diese Bilder werden in regelmäßigen Abständen in Übergängen angezeigt.

<!DOCTYPE html>
<html>
<head>
   <title> Web Carousel </title>
   <style>
      * {
         box-sizing: border-box;
         margin: 10px;
         padding: 3px;
      }
      body {
         background-color: rgb(195, 225, 235);
      }
      .box {
         width: 600px;
         height: 400px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         margin: auto;
      }
      .title {
         padding: 10px 0 10px 0;
         position: absolute;
         top: 10px;
      }
      .content {
         position: relative;
         top: 10%;
      }
      .carousel-content {
         position: absolute;
         top: 50%;
         left: 45%;
         transform: translate(-40%, -40%);
         text-align: center;
         z-index: 50;
      }
      .carousel-title {
         font-size: 48px;
         color: black;
         margin-bottom: 1rem;
         font-family: Times New Roman;
      }
      .slideshow {
         position: relative;
         height: 100%;
         overflow: hidden;
      }
      .wrapper {
         display: flex;
         width: 400%;
         height: 100%;
         top: 10%;
         border-radius: 30%;
         position: relative;
         animation: motion 20s infinite;
      }
      .slide {
         width: 80%;
         height: 200%;
         border-radius: 30%;
      }
      .img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      @keyframes motion {
         0% {left: 0;}
         10% {left: 0;}
         15% {left: -100%;}
         25% {left: -100%;}
         30% {left: -200%;}
         40% {left: -200%;}
         45% {left: -300%;}
         55% {left: -300%;}
         60% {left: -200%;}
         70% {left: -200%;}
         75% {left: -100%;}
         85% {left: -100%;}
         90% {left: 0%;}
      }
      .button {
         position: absolute;
         bottom: 3%;
         left: 50%;
         width: 1.3rem;
         height: 1.3rem;
         background-color: red;
         border-radius: 50%;
         border: 0.2rem solid #d38800;
         outline: none;
         cursor: pointer;
         transform: translateX(-50%);
         z-index: 70;
      }
      .button-1 {
         left: 20%;
      }
      .button-2 {
         left: 25%;
      }
      .button-3 {
         left: 30%;
      }
      .button-4 {
         left: 35%;
      }
      .button-1:focus~.wrapper {
         animation: none;
         left: 0%;
      }
      .button-2:focus~.wrapper {
         animation: none;
         left: -100%;
      }
      .button-3:focus~.wrapper {
         animation: none;
         left: -200%;
      }
      .button-4:focus~.wrapper {
         animation: none;
         left: -300%;
      }
      .button:focus {
         background-color: black;
      }
   </style>
</head>
<body>
   <div class= "box">
      <h1 id="Responsive-Carousel-using-CSS"> Responsive Carousel using CSS </h1>
      <div class= "content">
         <div class= "carousel-content">
         </div>
         <div class= "slideshow">
            <button class= "button button-1"> </button>
            <button class= "button button-2"> </button>
            <button class= "button button-3"> </button>
            <button class= "button button-4"> </button>
            <div class= "wrapper">
               <div class= "slide">
                  <img  src="/static/imghw/default1.png"  data-src="https://wallpapercave.com/wp/wp2782600.jpg"  class="lazy"  class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
               <div class= "slide">
                  <img  src="/static/imghw/default1.png"  data-src="https://wallpapercave.com/wp/wp2782600.jpg"  class="lazy"  class= "img" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
               <div class= "slide">
                  <img  src="/static/imghw/default1.png"  data-src="https://i.insider.com/5fd90e7ef773c90019ff1293?   style="max-width:90%"  class="lazy"  class= "img" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
               <div class= "slide">
                  <img  src="/static/imghw/default1.png"  data-src="https://wallpaperaccess.com/full/1164582.jpg"  class="lazy"  class= "img" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

CSS-Transformationseigenschaft

Um den vom visuellen Formatmodell verwendeten Koordinatenraum zu ändern, verwenden Sie die Transformationseigenschaft in CSS. Auf diese Weise können Sie Effekte wie Neigung, Drehung und Translation auf das Element anwenden.

Grammatik

transform: none| transform-functions| initial| inherit;

Nach dem Login kopieren

Werte

translate(x, y)

− Diese Funktion definiert die Übersetzung entlang der X- und Y-Koordinaten.

translate3d(x, y, z) − Diese Funktion bietet eine Übersetzung entlang der X-, Y- und Z-Koordinatenachsen.
initial − Setzt ein Element auf seinen Standardwert.
inherit − Es erbt den Wert des übergeordneten Elements.
CSS-Animation
Die Animationseigenschaft von CSS ermöglicht es uns, verschiedene Stilattribute eines Elements innerhalb eines bestimmten Zeitintervalls zu ändern, um ihm Animationseffekte hinzuzufügen. Einige Funktionen der Animation sind wie folgt:

Animationsname

– Damit können wir den Namen der Animation angeben, der anschließend von @keyframes verwendet wird, um die CSS-Regeln zum Ausführen der Animation anzugeben.

Animationsdauer – Legen Sie die Dauer der Animation fest
Animationszeitfunktion – Stellt die Geschwindigkeitskurve der Animation dar, d. h. das Zeitintervall, das die Animation verwendet, um von einem Satz benutzerdefinierter CSS-Eigenschaften zu einem anderen zu wechseln.
Animationsverzögerung – Legen Sie eine Verzögerung für einen Startwert während eines bestimmten Zeitintervalls fest
@keyframes wird verwendet, um den Code anzugeben, der in der Animation innerhalb eines bestimmten Zeitraums ausgeführt werden muss. Dies wird erreicht, indem CSS-Eigenschaften für bestimmte spezifische „Frames“ während der Animation deklariert werden, wobei die Prozentsätze von 0 % (Anfang der Animation) bis 100 % (Ende der Animation) reichen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Hilfe von CSS ein Karussell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Wie kann ich KB5055523 in Windows 11 nicht installieren?

3 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

3 Wochen vor By DDD

Kraftstufen für jeden Feind & Monster in R.E.P.O.

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Dead Rails - wie man Wölfe zähme

3 Wochen vor By DDD

Blauer Prinz: Wie man zum Keller kommt

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial

1654

CakePHP-Tutorial

1413

Laravel-Tutorial

1306

PHP-Tutorial

1252

C#-Tutorial

1225

Related knowledge

Google -Schriftarten variable Schriftarten Apr 09, 2025 am 10:42 AM

Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript Apr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

HTML -Datenattributehandbuch Apr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Wie wähle ich ein untergeordnetes Element mit dem erstklassigen Namen über CSS aus? Apr 05, 2025 pm 11:24 PM

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet? Apr 05, 2025 pm 05:51 PM

Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...

Ein Beweis für das Konzept, um Sass schneller zu machen Apr 16, 2025 am 10:38 AM

Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt

Wie kann in der Front-End-Entwicklung CSS und JavaScript verwendet werden, um Suchlight-Effekte ähnlich wie die Schnittstelle zwischen Windows 10 Einstellungen zu erzielen? Apr 05, 2025 pm 10:21 PM

So implementieren Sie Windows-ähnlich in der Front-End-Entwicklung ...

Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt Apr 09, 2025 am 11:29 AM

Tartan ist ein gemustertes Tuch, das normalerweise mit Schottland verbunden ist, insbesondere mit ihren modischen Kilts. Auf Tartanify.com haben wir über 5.000 Tartan gesammelt

See all articles