I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario.
The Setup (Welcome Ideas)
I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of children ('cards' displaying 4 visible cards per "slide"). The implemented code compares the container's offset, the number of children, and uses CSS transitions on the inner container to slide by the calculated offset while preventing overshooting.
I have different versions of prototypes, but I'm particularly interested in the button feature I've created.
What Works
- Multiple sliders on a single page
- Accurate detection of the number of "cards" within a container
- Slide animation based on the container's offset
- Dynamically calculating start and end values to prevent over-sliding
The Challenge
Users can spam click a button, interrupting the ongoing CSS transition (500ms) and starting a new one prematurely, causing the slider to misalign.
Possible Solution
The jQuery transitionend property appears to be the key to detecting when a CSS transition completes. However, I need assistance with its implementation.
I'm encountering difficulties understanding the technical jargon surrounding this, as explanations often lead to more complex documentation or incomplete forum responses. Any help in clarifying my mistakes and the underlying principles would be greatly appreciated.
Note
While I expect some criticism and judgment, considering my self-taught coding background with expertise limited to jQuery, courtesy and straightforward explanations supported by relevant resources are always welcomed. While the complete code is provided below, my main point of confusion lies in dealing with "transitionend," which I'm trying to incorporate using the following snippet:
$(cardsToShift).on('transitionend webkitTransitionEnd oTransitionEnd', function () {
cardsToShift.css("margin-left", margin);
});
In this snippet, 'cardsToShift' represents the card container that moves left/right by the pre-calculated 'margin' variable. My rationale for this code is "this container won't shift during an active transition due to the 'transitionend' line. If no transition is underway, the specified action should occur; otherwise, the user must click again" (some minor syntax issues may require cleaning up).
Thank you in advance for your assistance. I'll respond promptly upon returning online after a brief break.
HTML Code
<!-- HTML code goes here -->CSS Styling
@charset "UTF-8";
/* CSS styles go here */
Javascript Functions
// JavaScript functions go here