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.
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.
Hier ein kurzer Blick auf die Projektstruktur:
Testimonials-Slider/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
Öffnen Sie das Projektverzeichnis:
cd Testimonials-Slider
Führen Sie das Projekt aus:
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>
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 */
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
});
Sie können sich hier die Live-Demo des Testimonials Sliders ansehen.
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!
Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt, wobei der Schwerpunkt auf der Erstellung interaktiver Benutzeroberflächen lag.
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!
