Border being delayed when going from last slide to first slide again

[GenatHadri-technexus]

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?

Screen.Recording.2024-07-23.at.10.44.22.mov

[FullStackWebDeveloper-HARSH]

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

[GenatHadri-technexus]

@akiran