Back to Community
Home / Community / General

Troubleshooting Common MetaSlider Issues: Sliders Not Sliding, Loading, or Displaying Correctly

63 threads Sep 16, 2025

Content

MetaSlider is a powerful and popular plugin for creating sliders, galleries, and carousels on WordPress sites. However, like any complex plugin, users can sometimes encounter issues where a slider doesn't slide, fails to load, or doesn't display as expected. This guide covers the most common problems and their solutions, compiled from community support threads.

1. Slider Not Sliding or Functioning

One of the most frequent issues is a slider that displays a single image but does not transition to the next slide.

Common Causes & Solutions:

  • JavaScript Conflicts: This is often the primary culprit. Optimization plugins like Autoptimize can sometimes defer or combine JavaScript files in an order that breaks MetaSlider's functionality.
    • Solution: Try temporarily disabling JavaScript optimization in your caching/optimization plugin. If the slider works, you need to add an exception. A common script to exclude is jquery.flexslider.min.js. If that doesn't work, check your browser's developer console (F12) for specific errors, which may indicate another script that needs to be excluded.
  • Theme Conflicts: Some themes load their own version of the FlexSlider library, which can conflict with the one MetaSlider uses.
    • Solution: Check the browser console for errors mentioning flexslider. If you see an error like "Uncaught TypeError: $(...).flexslider is not a function," it often indicates a conflict. Contact your theme developer to see if this feature can be disabled, or perform a conflict test by temporarily switching to a default WordPress theme like Twenty Twenty-One.

2. Slider Not Loading or Showing a 500 Error

Sometimes, a slider may not appear at all, or you might encounter an "Internal Server Error (500)" when trying to preview it.

Common Causes & Solutions:

  • Plugin or Theme Conflict: A conflict with another plugin or your theme can prevent MetaSlider from loading its scripts properly.
    • Solution: Follow a standard troubleshooting process:
      1. Disable all other plugins except MetaSlider.
      2. Check if the slider works.
      3. If it does, reactivate your plugins one by one to identify the conflicting one.
      4. Also, test with a default theme (e.g., Twenty Twenty-One) to rule out a theme conflict.
  • jQuery Not Defined: A fundamental error where jQuery is not loaded before MetaSlider's scripts.
    • Solution: An error in the console like "Uncaught ReferenceError: jQuery is not defined" points to this issue. This is typically caused by a theme or plugin incorrectly deregistering jQuery. The conflict test described above is the best way to identify the cause.

3. Slider Display & Layout Problems

This category includes issues like unwanted gaps, misalignment, or sliders not appearing on specific devices.

Common Causes & Solutions:

  • Unwanted Gaps: A large gap below the slider is often a CSS issue.
    • Solution: Inspect the page using your browser's developer tools to identify the HTML element causing the gap. You can then add custom CSS to target that element and set its margin or padding to 0.
  • Centering Issues: The slider refuses to center even with the "Center align" option enabled.
    • Solution: Ensure the "100% width" option is disabled, as it can conflict with centering. If you are using Carousel mode, note that it is designed to fill the available width; adding more slides may be necessary to achieve the desired layout.
  • Not Displaying on Mobile: A slider might show on desktop but not on mobile devices.
    • Solution: This can be caused by incorrect image URLs (often due to a cache or security plugin altering them) or CSS that hides the slider on smaller screens. Check the browser's developer tools while simulating a mobile device to see if the slider's images are loading and if any CSS is hiding it (display: none).

4. HTTPS/SSL Mixed Content Warnings

If your site uses SSL (HTTPS), but the slider tries to load resources over HTTP, it can cause security warnings or broken images.

  • Solution: This is usually a site configuration issue, not a bug in MetaSlider. Ensure your WordPress address and site address are both set to https:// in Settings > General. A plugin like "Really Simple SSL" can often help resolve mixed content issues by forcing HTTPS for all resources.

5. Restricting a Slider to the Homepage

Many users want a slider to appear only on their homepage.

  • Solution: If you are using a shortcode, you can use the restrict_to attribute. The correct format is [metaslider id="your_slider_id" restrict_to="home"]. Replace your_slider_id with the actual ID number of your slider. If you have added the slider directly to your theme's template file (e.g., header.php), you can use a conditional PHP statement: 
    <?php if (is_front_page()) {
    echo do_shortcode('[metaslider id="your_slider_id"]');
} ?>

By methodically working through these common issues, you can resolve most problems with MetaSlider. The key steps are always to check the browser console for errors and to perform basic conflict testing by disabling other plugins and switching themes.

Related Support Threads Support