Back to Community
Home / Community / General

Troubleshooting MetaSlider Carousel Issues on Mobile and Safari

28 threads Sep 16, 2025

Content

Users of the 'Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider' plugin sometimes report issues where their carousels behave unexpectedly on specific browsers or devices. Two common problems are images not loading correctly on Safari and the carousel failing to restart after being tapped on a mobile device. This guide will help you diagnose and resolve these frustrating issues.

Common Carousel Problems and Their Symptoms

  • Safari/iPad Loading Issues: Images in the carousel appear as "gaps" or blank spaces upon initial page load. The images may only become visible after a user hovers over the area or interacts with the carousel. This often works correctly in other browsers like Chrome or Firefox.
  • Mobile Restart Failure: On touch devices like phones and tablets, a user can tap the carousel to pause it. However, a subsequent tap does not restart the automatic sliding motion. The carousel remains stuck until the page is refreshed.

Why Do These Issues Happen?

These problems are typically not due to a single cause but can stem from a combination of factors:

  • Browser-Specific Rendering: Safari handles certain CSS and JavaScript operations differently than Chromium-based browsers (Chrome, Edge, Brave). This can lead to differences in how and when images are loaded and displayed.
  • JavaScript Conflicts: Other plugins or your theme might be loading a different version of a JavaScript library (like jQuery) that conflicts with the one MetaSlider uses. The "Uncaught TypeError: e.owlCarousel is not a function" error seen in one thread is a classic sign of this.
  • Plugin or Theme Conflicts: CSS from another source can sometimes hide carousel elements. One user found their theme's CSS was setting part of the carousel to display: none.
  • Caching: Aggressive caching plugins can serve old, broken JavaScript or CSS files to users, causing functionality to break.

Step-by-Step Troubleshooting Guide

Follow these steps to identify and fix the problem. Always clear your cache after each step to see if the issue is resolved.

  1. Test in a Preview Environment: First, check if the carousel works in the preview area within the WordPress admin panel on the MetaSlider settings page. If it works here but not on your live site, the issue is likely a conflict with your theme or other plugins.
  2. Basic Conflict Test: The most reliable way to identify a conflict is to temporarily switch to a default WordPress theme (like Twenty Twenty-One) and disable all other plugins. If the carousel works normally, reactivate your theme and plugins one by one to find the culprit.
  3. Check for JavaScript Errors: Open your browser's developer console (often with F12) and look for any error messages highlighted in red. These errors can provide crucial clues about what is breaking.
  4. Review Carousel Settings: Double-check the carousel's settings within MetaSlider. Ensure that options like "Hover Pause" are disabled, as this can sometimes be misinterpreted by touch devices.
  5. Test on a Blank Page: Create a new, blank page on your site and add only the problematic carousel to it. This helps determine if the issue is caused by other content on your original page.
  6. No-Conflict Mode: If available, try enabling "No Conflict Mode" in MetaSlider's settings. This can help resolve issues with other scripts loading on the page.

Known Issues and Status

Based on community reports, the development team for 'Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider' is aware of the mobile tap-to-restart issue and has reportedly escalated it to their developers for a fix in a future update.

For persistent problems, especially those involving browser-specific bugs, it can be helpful to search for your specific error message alongside "MetaSlider" in community forums to see if others have found workarounds.

Related Support Threads Support