Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
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:



  

    

      

      
      
        

          
Headline

        
        
          Text

        
      

      
        

          
Headline

        
        
          Text

        
      

      
        

          
Headline

        
        
          Text

        
      


      
      
    

  




  

  
  



Answers(2)
avatar
Vogi
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.
Sources
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 ...
avatar
Tolerim
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.
;