akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.72k stars 2.1k forks source link

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

Open GenatHadri-technexus opened 2 months ago

GenatHadri-technexus commented 2 months ago

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

FullStackWebDeveloper-HARSH commented 1 month ago

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 commented 1 month ago

@akiran