Hello!
I am having an issue with the slider element on this home page. The slider has been created to look like the screenshot below where the other slides to the left and right are peaking out on either side of the current slide and a custom cursor appears when hovering over the element.
The component works correctly on Chrome and Firefox but NOT on Safari.
In the screenshot below you can see that the slides to the left and right of the current slide are showing when the page is loaded.
Chrome and Firefox:
However, when the website is viewed with Safari (see below) the slides to the left and right of the current slide are hidden until you navigate fully through the slider.
Safari:
I am using some custom code to start the slider on the 3rd slide when the page loads. Again, this is not affecting the layout on Chrome or Firefox, just Safari.
I’ve tried removing the code and reloading the page and the same issue occurs without the custom code so I’m thinking it has something to do with the layout.
Does anyone have an idea how to fix this?
Here is my site Read-Only: [https://preview.webflow.com/preview/south-40-snacks?utm_medium=preview_link&utm_source=designer&utm_content=south-40-snacks&preview=dadd4197e2c6679965d09d2a68d10866&workflow=preview]