fix: Slider unresponsiveness for smaller width

[upsaurav12]

Description

This PR fixes #5670

Notes for Reviewers

In this PR i have changed some properties like no of slides in each breakpoints by using use state because it was taking long time to render correct styling . so by using this method we can see the changes at the same time we are changing the width

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit 8a30198 at: https://669c214459d015307760b2c3--layer5.netlify.app

[leecalcote]

Thanks, @upsaurav12! 🎈

[Muhammed-Moinuddin]

@upsaurav12 Kindly elaborate the issue in detail and properly. Your point is not clear in the commit or in PR. There are couple of issues that I can see in your commit attached video. What is the issue that you are targeting?

In Live Preview: Slider is unresponsive, we got horizontal scrolling/extra left-side space issue, Meshmap CTA is unresponsive.

We have meeting on Monday regarding Website discussion, I'll suggest you to join that as well. https://layer5.io/community/calendar

[upsaurav12]

@Muhammed-Moinuddin can you tell me at which media query the slider is unresponsive like when i see in preview i could not see the unresponsive at mobile view . also what is `Mesh-map CTA container the problem in issue that i opened was :- the slider was unresponsive(i have attached the video) so when i saw this inlocal setup to contribute`` i noticed that the number of slides at specific breakpoint so i modified the number of slider at ``708px`` , ``991px``, ``1400px``

[Ashparshp]

@upsaurav12 Thanks for your contribution, let's discuss this on the website's call. Please add this as an agenda item to the meeting minutes.

[Muhammed-Moinuddin]

@Muhammed-Moinuddin can you tell me at which media query the slider is unresponsive like when i see in preview i could not see the unresponsive at mobile view . also what is Mesh-map CTA container the problem in issue that i opened was :- the slider was unresponsive(i have attached the video) so when i saw this in`local setup to contributei noticed that the number of slides at specific breakpoint so i modified the number of slider at708px`` , ``991px``, ``1400px``

Issue description that you've attached with PR created confusion. Yup, I got your point.
Let's discuss this further via meeting.

[upsaurav12]

Hi @Muhammed-Moinuddin any update?

[l5io]

🚀 Preview for commit 2862fa7 at: https://66a66d1e9788dc4edb19639d--layer5.netlify.app

[Muhammed-Moinuddin]

@upsaurav12
On my end, via live preview. The changes of slides is still taking time. I've to load everytime to check the responsiveness effect.
What is the main issue? Responsiveness of Sliders? or rendering time?

To me, it is same like we are having currently on live website.

[upsaurav12]

@Muhammed-Moinuddin oh i see whats the confusion the problem was that(from my end) that if you to the website and see the slider and change the width size it will.be unresponsive(elements are going outside) but if you see.this in local host then it will take some time to change from the unresponsive to responsive so i have change that
This the slider in preview from my end

cinnamon-2024-07-29T0922160530.mp4

[upsaurav12]

Hi @Muhammed-Moinuddin, are still facing the same problem?? from my end everything seems to be fine

[l5io]

🚀 Preview for commit 4a1600c at: https://66acc9e49e097e39dded7e2a--layer5.netlify.app

[Muhammed-Moinuddin]

Hi @Muhammed-Moinuddin, are still facing the same problem?? from my end everything seems to be fine

@upsaurav12 Your PR is just a logic enhancement and this issue is not considered valid as well please check: #5724 (comment)

There might be some other aspects causing it, but your PR is not about those.
Thanks for the efforts 👍 Looking forward to more contributions from your end.

[upsaurav12]

@Muhammed-Moinuddin
Do i need to close the issue?
Btw Thank you for your efforts ❤️

[Muhammed-Moinuddin]

@Muhammed-Moinuddin Do i need to close the issue? Btw Thank you for your efforts ❤️

Yup you can close them.