Heim > Artikel > Web-Frontend > Wie erstelle ich mit Hilfe von CSS ein Karussell?

Wie erstelle ich mit Hilfe von CSS ein Karussell?

WBOYnach vorne: 2023-08-23 12:33:05971Durchsuche

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 class= "title"> 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  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  class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
               <div class= "slide">
                  <img  class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?   style="max-width:90%" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
               <div class= "slide">
                  <img  class= "img" src="https://wallpaperaccess.com/full/1164582.jpg" alt="Wie erstelle ich mit Hilfe von CSS ein Karussell?" >
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

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;

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!

css bootstrap html 循环继承 transform animation

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Verschachtelung und Gruppierung in CSS erklärtNächster Artikel：Verschachtelung und Gruppierung in CSS erklärt

In Verbindung stehende Artikel

Mehr sehen