Troubleshooting MetaSlider: When Your Preview Works But the Live Site Doesn't
Content
One of the most common support queries for the 'Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider' plugin involves a frustrating scenario: your slideshow looks perfect in the admin preview but fails to appear, or appears incorrectly, on your live website. This discrepancy between preview and published state can be caused by a variety of factors, from caching to theme conflicts.
Based on community reports and troubleshooting threads, here are the most effective steps to diagnose and resolve this issue.
Why This Happens
The preview function within the WordPress admin often operates under different conditions than your public-facing site. It may bypass certain caching mechanisms, load scripts in a different order, or be unaffected by theme functions that conflict with the slider on the front end. The goal of troubleshooting is to identify what is different between these two environments.
Common Solutions
1. Clear All Caching Layers
This is the most frequent culprit. Caching is designed to save a static version of your page to serve visitors faster. However, if a cached version of your page is served that doesn't include the slider's dynamic scripts, it will not work.
- Browser Cache: Do a hard refresh (Ctrl + F5 on Windows, Cmd + Shift + R on Mac) or clear your browser's cache entirely.
- Plugin Cache: If you use a caching plugin like WP Super Cache, W3 Total Cache, or Autoptimize, clear its cache. For a more thorough test, temporarily disable the caching plugin to see if the slider appears.
- Server/CDN Cache: If your hosting provider has a server-level cache (e.g., Varnish, Nginx FastCGI Cache) or you use a Content Delivery Network (CDN) like Cloudflare, clear those caches as well.
2. Perform a Conflict Test
A theme or plugin conflict is another very common cause. The preview might work because the conflict only occurs when the full theme and all plugins are active on the front end.
- Theme Test: Temporarily switch your website's theme to a default WordPress theme like Twenty Twenty-Four. If the slider works with the default theme, the issue lies within your main theme. Contact your theme's support for guidance.
- Plugin Test: Deactivate all plugins except MetaSlider. If the slider works, reactivate your other plugins one by one, checking the site after each activation, to identify which one is causing the conflict. Optimization, security, and other slider plugins are common sources of conflict.
3. Check the JavaScript Console for Errors
Often, a conflict will prevent a necessary script from loading correctly, resulting in a JavaScript error that stops the slider from functioning.
- Navigate to your live page where the slider should be.
- Right-click on the page and select Inspect.
- Click on the Console tab.
- Look for any error messages highlighted in red. Common errors related to this issue include "Unexpected end of input" or "Cannot read property 'style' of null". These errors can provide a vital clue about the source of the problem, such as a script from another plugin failing.
4. Review Slider Settings and Shortcode
Ensure the slider is configured correctly for its placement on your site.
- Confirm you are using the correct shortcode or block to display the slider on your page.
- Check the slider's Advanced Settings for any options that might affect its output.
- If you have recently updated the plugin, review your slider settings, as default behaviors can sometimes change.
5. Check for Known Version Bugs
Occasionally, a specific version of the plugin may introduce a bug that breaks front-end display. As seen in the sample threads, a bug in version 3.99.0 broke the preview for many users and was fixed in version 3.100.0. Check the plugin's changelog or support forums to see if others are reporting similar issues with your version. Ensuring you are running the latest version of the plugin is always a good first step.
Conclusion
The 'preview works, live site doesn't' problem is almost always solvable by methodically working through these steps. Start by clearing all caches, then move on to a theme and plugin conflict test. The JavaScript console is an invaluable tool for pinpointing the exact error. By following this guide, you should be able to get your slider displaying correctly for all your visitors.
Related Support Threads Support
-
Slides missing from Slideshowhttps://wordpress.org/support/topic/slides-missing-from-slideshow/
-
Slider only displays when page is reloaded on desktophttps://wordpress.org/support/topic/slider-only-displays-when-page-is-reloaded-on-desktop/
-
Preview yes, Published nohttps://wordpress.org/support/topic/preview-yes-published-no/
-
MetaSlider Preview in Worpress Not Showinghttps://wordpress.org/support/topic/metaslider-preview-in-worpress-not-showing/
-
Preview isn’t workinghttps://wordpress.org/support/topic/preview-isnt-working-2/
-
Just shows first picture, no interfacehttps://wordpress.org/support/topic/just-shows-first-picture-no-interface/
-
display shows something that doesn’t belonghttps://wordpress.org/support/topic/display-shows-something-that-doesnt-belong/
-
Lightbox with small Bottom Preview galleryhttps://wordpress.org/support/topic/lightbox-with-small-bottom-preview-gallery/
-
SLIDER NOT WORKINGhttps://wordpress.org/support/topic/slider-not-working-165/
-
Preview broken in latest version.https://wordpress.org/support/topic/preview-broken-in-latest-version/
-
Slideshow works in Preview, but otherwise NOT.https://wordpress.org/support/topic/slideshow-works-in-preview-but-otherwise-not/
-
Preview blankhttps://wordpress.org/support/topic/preview-blank/
-
Upload interference and Preview not working?https://wordpress.org/support/topic/upload-interference-and-preview-not-working/
-
duplicate text in the title field (for Chrome)https://wordpress.org/support/topic/duplicate-text-in-the-title-field-for-chrome/
-
Slider not Slidinghttps://wordpress.org/support/topic/slider-not-sliding-20/
-
Smart crop not workinghttps://wordpress.org/support/topic/smart-crop-not-working/
-
Sliders only work in previewhttps://wordpress.org/support/topic/sliders-only-work-in-preview/
-
Tried 4 different plugins but Lightbox’s not workinghttps://wordpress.org/support/topic/tried-4-different-plugins-but-lightboxs-not-working/
-
Gallery BETAhttps://wordpress.org/support/topic/gallery-beta/
-
No preview workinghttps://wordpress.org/support/topic/no-preview-working/
-
Metaslider stopped workinghttps://wordpress.org/support/topic/metaslider-stopped-working-5/
-
WP 6 updatehttps://wordpress.org/support/topic/wp-6-update/