akiran
Border being delayed when going from last slide to first slide again
I am adding a border to the slide with the 'slick-current' class. However, when the list of images restarts from the beginning, there's a delay in applying the border to the first element. Does anyone know how I can fix this?
https://github.com/user-attachments/assets/9e0637f7-6a00-40ab-935a-a57c7326f005
Issue Understanding and Reproduction Issue Title: Border being delayed when going from last slide to first slide again
Description: The user is adding a border to the slide with the 'slick-current' class. However, when the list of images restarts from the beginning, there's a delay in applying the border to the first element.
Steps to Reproduce: ->Add a border style to the slide with the 'slick-current' class in the react-slick component. ->Navigate through the slides to the last one. ->Move from the last slide to the first slide again. ->Observe the delay in applying the border to the first slide.
Design Options Option 1: Optimize Re-rendering Mechanism Approach: Investigate and optimize the component's re-rendering mechanism when transitioning from the last slide to the first. This may involve tweaking the lifecycle methods or implementing a more efficient state management approach to ensure the border is applied promptly. Pros: Minimal changes to the existing codebase; leverages existing component structure. Cons: Requires deep understanding of the component's internals and might be complex to debug.
Option 2: Use CSS Transitions Approach: Apply CSS transitions to handle the border changes more smoothly. By leveraging CSS properties, we can ensure that the border transition happens instantaneously without noticeable delay. Pros: Simpler and cleaner solution; less dependency on JavaScript re-rendering. Cons: Might require additional CSS adjustments and testing across different browsers to ensure compatibility.
**Time Estimate Option 1: ->Investigation and analysis: 4 hours ->Implementation: 6 hours ->Testing and debugging: 4 hours ->Total: 14 hours
Option 2: ->CSS adjustments and testing: 3 hours ->Implementation: 2 hours ->Cross-browser testing: 3 hours ->Total: 8 hours
