Créer un site Web de curseur de témoignages-tutoriel CSS-php.cn

Table des matières

John Tarkpor

Junior Front-end Developer

Maison

interface Web

tutoriel CSS

Créer un site Web de curseur de témoignages

PHPz

Aug 24, 2024 am 06:43 AM

Build a Testimonials Slider Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de présenter mon dernier projet : un Testimonials Slider. Ce projet est un excellent moyen d'améliorer vos compétences dans la création de composants Web interactifs et dynamiques à l'aide de JavaScript. Que vous débutiez ou cherchiez à ajouter une nouvelle fonctionnalité à votre portefeuille, ce projet Testimonials Slider offre une excellente opportunité d'approfondir le développement front-end.

Aperçu du projet

Le Testimonials Slider est une application Web qui permet aux utilisateurs de naviguer à travers divers témoignages à l'aide des boutons suivant et précédent. Ce projet montre comment créer une interface utilisateur interactive, gérer l'état avec JavaScript et améliorer l'expérience utilisateur grâce à des transitions fluides.

Caractéristiques

Témoignages interactifs : les utilisateurs peuvent parcourir plusieurs témoignages à l'aide des boutons de navigation.
Transitions fluides : les témoignages changent avec des transitions fluides, offrant une meilleure expérience utilisateur.
Conception réactive : garantit une expérience cohérente et visuellement attrayante sur différents appareils.

Technologies utilisées

HTML : Structure la page Web et les éléments de témoignage.
CSS : stylise l'interface utilisateur, garantissant un design épuré et réactif.
JavaScript : gère la logique de navigation des témoignages et des interactions des utilisateurs.

Structure du projet

Voici un aperçu rapide de la structure du projet :

Testimonials-Slider/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : contient la structure HTML du curseur de témoignages.
style.css : inclut des styles CSS pour améliorer l'apparence et la réactivité de l'application.
script.js : Gère la logique de navigation des témoignages et les interactions des utilisateurs.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Testimonials-Slider
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour commencer à utiliser le curseur de témoignages.

Usage

Ouvrez le site Web dans un navigateur Web.
Voir les témoignages en cliquant sur les boutons "Suivant" ou "Précédent" pour naviguer parmi les différents témoignages.
Profitez des transitions en douceur au fur et à mesure que vous parcourez les témoignages.

Explication du code

HTML

Le fichier index.html fournit la structure de base du curseur de témoignages, y compris le contenu du témoignage et les boutons de navigation. En voici un extrait :

<!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 id="John-Tarkpor">John Tarkpor</h3>
            <h4 id="Junior-Front-end-Developer">Junior Front-end Developer</h4>
          </div>
        </div>
        <div class="image">
          <img src="/static/imghw/default1.png"  data-src="./images/image-john.jpg"  class="lazy" alt="John's Testimonial" />
          <div class="button">
            <img src="/static/imghw/default1.png"  data-src="./images/icon-prev.svg"  class="lazy" id="prev-1" alt="Créer un site Web de curseur de témoignages" />
            <img src="/static/imghw/default1.png"  data-src="./images/icon-next.svg"  class="lazy" 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>

Copier après la connexion

CSS

Le fichier style.css stylise le curseur de témoignages, offrant une mise en page moderne et conviviale. Voici quelques styles clés :

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

Copier après la connexion

Javascript

Le fichier script.js gère la logique de navigation dans les témoignages et la gestion des interactions des utilisateurs. En voici un extrait :

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

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du curseur de témoignages ici.

Conclusion

La création de ce curseur de témoignages a été une expérience engageante qui a approfondi ma compréhension de JavaScript et la manière de créer des composants Web dynamiques et interactifs. J'espère que ce projet vous incitera à explorer davantage avec JavaScript et à améliorer vos compétences en développement Web. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours d'apprentissage continu en développement Web, axé sur la création d'interfaces utilisateur interactives.

Auteur

Abhishek Gurjar
- Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn