Créer un slider de témoignages personnalisés sur WordPress sans plugin : guide complet avec code CSS et JavaScript

Ce code crée une section de slider contenant plusieurs témoignages, ainsi que deux boutons pour naviguer entre les témoignages.

Ajouter du CSS pour le style

Le CSS va rendre notre slider visuellement attrayant. Ajoutez ce code CSS dans votre fichier style.css :

.testimonial-slider {
    position: relative;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

.testimonial-slide {
    display: none;
    text-align: center;
}

.testimonial-slide blockquote {
    font-style: italic;
    font-size: 1.5em;
}

.testimonial-slide cite {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    padding: 10px;
    color: #333;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

Ce style simple garantit que les témoignages sont bien lisibles et que les boutons de navigation sont visibles.

Implémentation du JavaScript

Pour que le slider fonctionne, ajoutons un peu de JavaScript. Ce code permettra de naviguer entre les témoignages :

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

function showSlides() {
    const slides = document.getElementsByClassName("testimonial-slide");
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    slides[slideIndex-1].style.display = "block";  
    setTimeout(showSlides, 5000); // Change slide every 5 seconds
}

function changeSlide(n) {
    slideIndex += n;
    if (slideIndex < 1) {slideIndex = slides.length;}
    if (slideIndex > slides.length) {slideIndex = 1;}
    showSlides();
}
</script>

Ce script fait défiler automatiquement les témoignages toutes les 5 secondes, tout en permettant à l'utilisateur de naviguer manuellement.

Tester votre slider de témoignages

Après avoir ajouté le code HTML, CSS et JavaScript, assurez-vous de tester votre slider sur plusieurs appareils. Cela garantira que l'expérience utilisateur reste fluide et réactive sur desktop et mobile.

Personnalisation avancée du slider

Pour aller plus loin dans la personnalisation, vous pouvez envisager d'ajouter des effets de transition CSS lors de l'affichage des slides. Par exemple, vous pouvez utiliser le property opacity pour créer un effet de fondu :

.testimonial-slide {
    transition: opacity 1s ease;
}

Vous aurez également la possibilité de personnaliser le nombre de témoignages affichés à la fois, ou d'ajouter des animations JavaScript pour un affichage encore plus dynamique.

Mesurer l'impact de votre slider

Une fois votre slider en place, il est essentiel de mesurer son impact. Intégrez des outils d'analyse comme Google Analytics pour suivre les interactions des utilisateurs avec vos témoignages. Vous pouvez aussi créer un compteur de vues dynamique pour savoir combien de fois chaque témoignage est consulté.

Conclusion : Optimisez votre expérience utilisateur

Avec la mise en œuvre d'un slider de témoignages personnalisé, vous avez non seulement embelli votre site, mais vous avez également apporté une fonction essentielle qui peut augmenter la valeur perçue de votre offre. L'ajout d'un slider sans utiliser un plugin peut sembler intimidant, mais les résultats valent largement l'effort. Quel aspect de ce projet pensez-vous intégrer en premier ? Partagez vos idées ou questions dans les commentaires ci-dessous !