Einführung
Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt vorstellen zu können: einen Testimonials Slider. Dieses Projekt ist eine großartige Möglichkeit, Ihre Fähigkeiten beim Erstellen interaktiver und dynamischer Webkomponenten mithilfe von JavaScript zu verbessern. Egal, ob Sie gerade erst anfangen oder Ihrem Portfolio eine neue Funktion hinzufügen möchten, dieses Testimonials Slider-Projekt bietet eine hervorragende Gelegenheit, tiefer in die Front-End-Entwicklung einzutauchen.
Projektübersicht
Der Testimonials-Slider ist eine webbasierte Anwendung, mit der Benutzer mithilfe der Schaltflächen „Weiter“ und „Zurück“ durch verschiedene Testimonials navigieren können. Dieses Projekt zeigt, wie man eine interaktive Benutzeroberfläche erstellt, den Status mit JavaScript verwaltet und die Benutzererfahrung durch reibungslose Übergänge verbessert.
Merkmale
-
Interaktive Testimonials: Benutzer können mithilfe der Navigationsschaltflächen durch mehrere Testimonials navigieren.
-
Sanfte Übergänge: Erfahrungsberichte ändern sich mit sanften Übergängen und sorgen so für ein besseres Benutzererlebnis.
-
Responsive Design: Sorgt für ein konsistentes und optisch ansprechendes Erlebnis auf verschiedenen Geräten.
Verwendete Technologien
-
HTML: Strukturiert die Webseite und die Testimonial-Elemente.
-
CSS: Gestaltet die Benutzeroberfläche und sorgt für ein klares und ansprechendes Design.
-
JavaScript: Verwaltet die Logik für die Testimonial-Navigation und Benutzerinteraktionen.
Projektstruktur
Hier ein kurzer Blick auf die Projektstruktur:
Testimonials-Slider/
├── index.html
├── style.css
└── script.js
Nach dem Login kopieren
-
index.html: Enthält die HTML-Struktur für den Testimonials-Slider.
-
style.css: Enthält CSS-Stile, um das Erscheinungsbild und die Reaktionsfähigkeit der Anwendung zu verbessern.
-
script.js: Verwaltet die Testimonial-Navigationslogik und Benutzerinteraktionen.
Installation
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd Testimonials-Slider
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den Testimonials-Slider zu verwenden.
Verwendung
-
Öffnen Sie die Website in einem Webbrowser.
-
Zeigen Sie Erfahrungsberichte, indem Sie auf die Schaltflächen „Weiter“ oder „Zurück“ klicken, um durch die verschiedenen Erfahrungsberichte zu navigieren.
-
Genießen Sie die sanften Übergänge, während Sie sich durch die Erfahrungsberichte bewegen.
Code-Erklärung
HTML
Die Datei index.html stellt die Grundstruktur des Testimonials-Sliders bereit, einschließlich des Testimonials-Inhalts und der Navigationsschaltflächen. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testimonials Slider</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="box-1" id="testimonial-1">
<div class="text">
<h1>
“ If you want to lay the best foundation possible I’d recommend
taking this course. The depth the instructors go into is incredible.
I now feel so confident about starting up as a professional
developer. ”
</h1>
<div class="name">
<h3>John Tarkpor</h3>
<h4>Junior Front-end Developer</h4>
</div>
</div>
<div class="image">
<img src="./images/image-john.jpg" alt="John's Testimonial" />
<div class="button">
<img src="./images/icon-prev.svg" id="prev-1" alt="Erstellen Sie eine Slider-Website für Testimonials" />
<img src="./images/icon-next.svg" id="next-1" alt="Next" />
</div>
</div>
</div>
<!-- Additional testimonials here -->
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Nach dem Login kopieren
CSS
Die style.css-Datei formatiert den Testimonials-Slider und bietet ein modernes und benutzerfreundliches Layout. Hier sind einige wichtige Stile:
* {
box-sizing: border-box;
}
body {
font-family: Inter, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 90vh;
background: url(./images/pattern-curve.svg) no-repeat fixed left bottom;
display: flex;
align-items: center;
justify-content: center;
}
.box-1 {
width: 70%;
height: 70%;
background-color: transparent;
display: none; /* Hide all testimonials initially */
}
#testimonial-1 {
display: flex; /* Display the first testimonial */
}
/* Additional styles */
Nach dem Login kopieren
JavaScript
Die Datei „script.js“ verwaltet die Logik für die Navigation durch die Testimonials und die Verarbeitung von Benutzerinteraktionen. Hier ist ein Ausschnitt:
document.addEventListener("DOMContentLoaded", function () {
const testimonials = document.querySelectorAll(".box-1");
let currentIndex = 0;
const showTestimonial = (index) => {
testimonials.forEach((testimonial, i) => {
testimonial.style.display = i === index ? "flex" : "none";
});
};
document.getElementById("next-1").addEventListener("click", () => {
currentIndex = (currentIndex + 1) % testimonials.length;
showTestimonial(currentIndex);
});
document.getElementById("prev-1").addEventListener("click", () => {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
showTestimonial(currentIndex);
});
// Additional JavaScript logic
});
Nach dem Login kopieren
Live-Demo
Sie können sich hier die Live-Demo des Testimonials Sliders ansehen.
Abschluss
Die Erstellung dieses Testimonials-Sliders war eine spannende Erfahrung, die mein Verständnis von JavaScript und der Erstellung dynamischer, interaktiver Webkomponenten vertiefte. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, mehr mit JavaScript zu erkunden und Ihre Webentwicklungsfähigkeiten zu verbessern. Viel Spaß beim Codieren!
Credits
Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt, wobei der Schwerpunkt auf der Erstellung interaktiver Benutzeroberflächen lag.
Autor
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Slider-Website für Testimonials. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
