Comment créer un slider d'avis clients sur mon site?

Script
1

Je travaille actuellement sur l’amélioration de l’interface utilisateur de notre site web et je souhaite intégrer un slider d’avis clients sur notre page d’accueil. L’idée est de montrer aux nouveaux visiteurs les retours positifs de nos clients existants pour renforcer la confiance et encourager les conversions. Je me demande comment je peux mettre en place un tel slider. Quelqu’un a-t-il une idée ou une expérience dans ce domaine ?

2 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider d'avis clients</title>
<style>
  /* Style du conteneur du slider */
  .slider-container {
    width: 80%;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    position: relative;
  }

  /* Style des slides */
  .slide {
    display: none;
    width: 100%;
    text-align: center;
  }

  /* Style du texte de l'avis */
  .testimonial {
    font-style: italic;
    margin-bottom: 20px;
  }

  /* Style du nom de l'auteur */
  .author {
    font-weight: bold;
  }

  /* Style des boutons de navigation du slider */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    border: none;
    z-index: 100;
    transition: background-color 0.3s ease;
  }

  .prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }
</style>
</head>
<body>

<div class="slider-container">
  <!-- Slides -->
  <div class="slide">
    <p class="testimonial">"Excellent service, je suis très satisfait!"</p>
    <p class="author">- Jean Dupont</p>
  </div>

  <div class="slide">
    <p class="testimonial">"Le produit est de très bonne qualité, je le recommande à tous!"</p>
    <p class="author">- Marie Martin</p>
  </div>

  <div class="slide">
    <p class="testimonial">"Livraison rapide et service client très réactif. Merci!"</p>
    <p class="author">- Pierre Durand</p>
  </div>

  <!-- Boutons de navigation -->
  <button class="prev" onclick="plusSlides(-1)">&#10094;</button>
  <button class="next" onclick="plusSlides(1)">&#10095;</button>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

// Fonction pour avancer ou reculer dans les slides
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Fonction pour afficher les slides
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("slide");
  
  // Si on dépasse le nombre de slides, revenir au premier
  if (n > slides.length) {
    slideIndex = 1;
  }    
  if (n < 1) {
    slideIndex = slides.length;
  }

  // Masquer tous les slides
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }

  // Afficher le slide actuel
  slides[slideIndex-1].style.display = "block";  
}
</script>

</body>
</html>

Dans cet exemple :

Les avis clients sont stockés dans des div avec la classe « slide ».
Les boutons de navigation « Précédent » et « Suivant » permettent de passer aux avis précédents ou suivants.
Le JavaScript permet de contrôler l’affichage des slides, en masquant tous les autres sauf celui qui est actuellement affiché.

3

  1. Trustpilot: Trustpilot est une plateforme de révision qui permet aux utilisateurs de poster des avis sur les entreprises. Ils offrent un widget gratuit que vous pouvez intégrer à votre site pour afficher les avis de vos clients. URL: https://www.trustpilot.com/

  2. Yotpo: Yotpo offre une fonctionnalité de carrousel d’avis que vous pouvez intégrer à votre site. Ils offrent un essai gratuit de 14 jours, après quoi les prix commencent à 49 $ par mois. URL: https://www.yotpo.com/

  3. Elfsight : Elfsight offre un widget de témoignages qui vous permet de créer un slider d’avis. Les prix commencent à 5 $ par mois. URL: Customer Testimonials Slider — widget for any website (Easy and free)

  4. Testimonial Slider : C’est un plugin WordPress qui vous permet de créer un slider d’avis. C’est gratuit. URL: Testimonial Slider – WordPress plugin | WordPress.org

  5. Smart Slider 3: Un autre plugin WordPress qui peut être utilisé pour créer un slider d’avis. Il est gratuit, mais offre également des plans premium à partir de 35 $ pour plus de fonctionnalités. URL: https://smartslider3.com/

  6. Slider Revolution: C’est un plugin WordPress puissant qui peut être utilisé pour créer n’importe quel type de slider, y compris un slider d’avis. Les prix commencent à 29 $. URL: https://revolution.themepunch.com/

  7. Bazaarvoice: Bazaarvoice est une plateforme qui aide les entreprises à recueillir et à afficher des avis de clients. Ils offrent une fonctionnalité de carrousel d’avis. Les prix ne sont pas disponibles sur leur site web. URL: https://www.bazaarvoice.com/

  8. Feefo: Feefo est une autre plateforme d’avis qui offre une fonctionnalité de carrousel d’avis. Les prix ne sont pas disponibles sur leur site web. URL: https://www.feefo.com/

  9. Powr.io: Powr offre un plugin de slider d’avis pour les sites web. Il est gratuit avec des options premium à partir de 4,99 $ par mois. URL: https://www.powr.io/plugins/testimonial-slider/standalone

  10. Testimonial Robot: C’est un plugin Joomla qui vous permet de créer un slider d’avis. C’est gratuit. URL: Joomla! Extensions Directory