pause slide

Par /

Pour mettre en pause le slider, on peut ajouter une fonctionnalité de pause qui empêche le défilement automatique.
On peut utiliser un état (par exemple, isPaused) pour contrôler si le slider est en pause ou non.

Le code :

import { useEffect, useState } from "react";
import { useData } from "../../contexts/DataContext";
import { getMonth } from "../../helpers/Date";

import "./style.scss";

const Slider = () => {
const { data } = useData();
const [index, setIndex] = useState(0);
const [isPaused, setIsPaused] = useState(false); // État pour contrôler la pause

const byDateDesc = data?.focus.sort((evtB, evtA) =>
new Date(evtA.date) < new Date(evtB.date) ? -1 : 1
);

const nextCard = () => {
if (!isPaused) {
if (byDateDesc && index < byDateDesc.length - 1) {
setIndex(index + 1);
} else {
setIndex(0);
}
}
};

const handleBulletClick = (bulletIndex) => {
setIndex(bulletIndex);
};

useEffect(() => {
const interval = setInterval(nextCard, 5000); // Défilement automatique
return () => clearInterval(interval); // Nettoie l'intervalle lors du démontage du composant
}, [index, isPaused]); // Re-déclenche l'effet lorsqu'un nouvel index ou l'état "isPaused" change

const togglePause = () => {
setIsPaused(!isPaused); // Inverse l'état de pause
};

return (
<div className="SlideCardList">
{byDateDesc &&
byDateDesc.map((event, idx) => (
<div
key={event.id}
className={`SlideCard SlideCard--${
index === idx ? "display" : "hide"
}`}
>
<img src={event.cover} alt="forum" />
<div className="SlideCard__descriptionContainer">
<div className="SlideCard__description">
<h3>{event.title}</h3>
<p>{event.description}</p>
<div>{getMonth(new Date(event.date))}</div>
</div>
</div>
</div>
))}
<div className="SlideCard__paginationContainer">
<div className="SlideCard__pagination">
{byDateDesc &&
byDateDesc.map((radio, radioIdx) => (
<input
key={radio.id}
type="radio"
name="radio-button"
checked={index === radioIdx}
onChange={() => handleBulletClick(radioIdx)}
/>
))}
</div>
</div>
<button type="button" onClick={togglePause}>
{isPaused ? "Play" : "Pause"} {/* Bouton de pause/reprise */}
</button>
</div>
);
};

export default Slider;

 

Dans ce code, j’ai ajouté un état isPaused pour contrôler si le slider est en pause ou non.

La fonction togglePause est utilisée pour inverser l’état de pause lorsque l’utilisateur clique sur le bouton « Play » ou « Pause ».

L’effet useEffect qui gère le défilement automatique vérifie si le slider est en pause avant de passer à l’image suivante.

La valeur de isPaused est également incluse dans les dépendances de l’effet pour que le défilement automatique puisse être arrêté ou relancé en fonction de son état.

 

 

Pour le cas de test de la fonctionnalité « mettre le slider en pause » tout en consultant le formulaire, voici comment on peut le formuler :

Cas de Test : Mise en pause du Slider en consultant le formulaire et en appuyant sur la barre d’espace

Objectif : Vérifier que le slider est mis en pause lorsque l’utilisateur consulte le formulaire et appuie sur la barre d’espace, et que le slider ne continue pas de défiler pendant cette action.

Étapes du Test :

  1. S’assurer que le slider est en cours de défilement automatique.

  2. Utilisez le clavier pour naviguer vers le formulaire, par exemple, en utilisant la touche « Tab » pour accéder aux champs du formulaire.

  3. Appuyez sur la barre d’espace pour activer un champ du formulaire. Cela simule l’action de l’utilisateur qui interagit avec le formulaire.

  4. Vérifiez que le slider s’arrête de défiler automatiquement.

Critères de Réussite :

  • Le slider s’arrête automatiquement lorsque l’utilisateur appuie sur la barre d’espace pour activer un champ du formulaire.

  • Le slider ne continue pas de défiler pendant que l’utilisateur consulte le formulaire.

  • L’utilisateur peut reprendre le défilement automatique du slider en utilisant les contrôles appropriés (par exemple, un bouton « Play/Pause »).

Cela garantit que le slider est mis en pause pendant que l’utilisateur consulte le formulaire et que la reprise du défilement est possible une fois que l’utilisateur a terminé de consulter le formulaire.

 

Retour en haut