Erstellen Sie eine Slider-Website für Testimonials

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

• 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:

1. Klonen Sie das Repository:
   

   git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
   

2. Öffnen Sie das Projektverzeichnis:
   

   cd Testimonials-Slider
   

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um den Testimonials-Slider zu verwenden.

Verwendung

1. Öffnen Sie die Website in einem Webbrowser.
2. Zeigen Sie Erfahrungsberichte, indem Sie auf die Schaltflächen „Weiter“ oder „Zurück“ klicken, um durch die verschiedenen Erfahrungsberichte zu navigieren.
3. 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:

  
    <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>
  
  
    <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>
  

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 */

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
});

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

• Abhishek Gurjar
  • GitHub-Profil

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!