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.
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.
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.
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.
lautet:
Beispiel
<!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>
transform: none| transform-functions| initial| inherit;
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.
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:
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!
Der Apache-Start ist fehlgeschlagen
Verwendung der Memset-Funktion
So ändern Sie die Hosts-Datei
Einführung in die Hauptarbeitsinhalte des Backends
ASUS x402c
Was ist der Unterschied zwischen Ibatis und Mybatis?
So richten Sie Textfelder in HTML aus
Kosteneffizienzanalyse des Lernens von Python, Java und C++
