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

Build a Testimonials Slider Website

Introduction

Bonjour, amis développeurs ! Je suis ravi de présenter mon dernier projet : unTestimonials 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é de plonger plus profondément dans le développement front-end.

Aperçu du projet

LeTestimonials Sliderest 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 utilisateur.

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 référentiel:

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 Webdans un navigateur Web.
Voir les témoignagesen cliquant sur les boutons "Suivant" ou "Précédent" pour naviguer parmi les différents témoignages.
Profitez des transitions en douceurau 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. Voici un extrait :

     Testimonials Slider   
      “ 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. ” 
  John Tarkpor
 Junior Front-end Developer
 
 
      
 
 
  
  Made with ❤️ by Abhishek Gurjar

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