If you're interested, I made a functional demo sandbox which can be found here
This particular demo showcases a basic array cycler with 3 elements that are displayed as slides moving left or right depending on the selected direction.
While I acknowledge that my approach may not be optimal, I am open to any suggestions for improvement.
The main issue I encountered was ensuring that the sliding functionality worked smoothly in both directions. This required me to incorporate a delay when transitioning the slide to the left. Additionally, I admit that my naming convention may be confusing as the button actions (prev/next) do not align directly with the cycling/sliding behavior.
In summary, the key component of this demo is the onClick handler for the prev/next buttons, passing a boolean value for direction and utilizing CSS animations for motion effects. While I am aware that nested ternaries are generally discouraged, they were necessary for this specific implementation.
const cycleArr = cyclePrev => {
if (!slideDone) {
return;
}
setSlideDone(false);
const newArrSort = cyclePrev ? cycleLeft(slides) : cycleRight(slides);
slideClassRef.current.classList = slideDir
? `App ${slideDir === "left" ? "slide-left" : "slide-right"}`
: "App";
if (slideDir === "left") {
setSlides(newArrSort);
setTimeout(() => {
slideClassRef.current.classList = "App";
setSlideDone(true);
}, 1050);
} else {
setTimeout(() => {
slideClassRef.current.classList = "App";
setSlides(newArrSort);
setSlideDone(true);
}, 1000);
}
};
Although I could have used an existing solution like slick carousel, I opted to create this demo to highlight my challenges with state management in ReactJS. My goal is to improve and refine my approach in handling complex state scenarios.