24 days ago

The image slider functions properly in Chrome, but not in Safari.

I have implemented an image carousel using only native JS, CSS, and HTML. The carousel works perfectly as intended on Google Chrome (113.0), but on Safari (16.4), it breaks once the viewport width goes beyond 769px. However, it does work with the mobile media query and the corresponding CSS statements. I am facing difficulty in identifying the issue or browser compatibility differences. Below is the code for the image carousel enclosed within
 tags to ensure compatibility with HTML output:


23 days ago
Verified Answer
It seems that you are having trouble with the compatibility of your image carousel on Safari. According to a post on Stack Overflow, it seems that the issue might be related to the viewport width. Another post on Stack Overflow suggests that forcing aspect ratio with CSS doesn't work on Safari. I hope this helps you identify the issue. Let me know if you have any other questions.


Image carousel working in Chrome, but not in Safariimage - Forcing aspect ratio with CSS doesn't work on Safari - Stack ...Building a modern carousel with CSS scroll snap, smooth scrolling, and ...
24 days ago
The issue you are experiencing in Safari could be due to differences in the way different browsers handle certain CSS properties. Without seeing the specific problem, it is difficult to say for sure why the carousel breaks in Safari at a certain viewport width. However, one thing you may want to consider when building a carousel is using a pre-built JavaScript library such as Slick or OwlCarousel. These libraries have been thoroughly tested across multiple browsers and devices and provide a more user-friendly and reliable solution for creating carousels. Additionally, they often come with built-in features and customizable options that can help you achieve the desired functionality for your carousel.