Slider looks broken on the site

Most errors are caused by cache/optimization plugins, so you should always try to turn them off first!

In this article

How to debug the problem yourself on WordPress?

Use Health Check & Troubleshooting plugin to figure out which plugin or theme creates the issue, and address the problem within that plugin/theme.

AJAX loading

Problem description

Smart Slider 3 loads correctly on a page, then after navigating to some other page and coming back, the slider no longer works.

Your theme probably uses AJAX to call in the pages, and when the AJAX loading happens some basic page loading events aren't trigged, so some codes won't run. Because of this, we don't support the slider to be called using AJAX.

Try turning on Use Iframe In AJAX Calls the at the Global Settings → General and see if that helps. If it makes no difference, check whether your theme offers an option to disable or turn off this AJAX loading. Then you should turn it off, or change your theme into some other one which isn't using AJAX.

The images missing from the site, but they appear in the preview/editor WordPress

By default your images are coming from a similar url: http://example.com/wp-content/uploads/slider1/image1.jpg . If you have an error, where you have a similar path for your website: home/domains/xy.com/public_html/ and the url is wrong in a way, that it includes this path: http://example.com/home/domains/xy.com/public_html/wp-content/uploads/slider1/image1.jpg then the problem could be, that the upload folder was customized wrongly.

You should go to your WordPress menu → Settings → Media → Store uploads in this folder and modify the value to the suggested default value. The way this setting works is, that if everything is correct with your upload folder's path, you cannot see this setting. So after saving the setting correctly if you see it being disappeared, don't worry, you just solved the problem.

Images look broken

If your images aren't appearing correctly, like there is only one color on the whole image, while in your server the original images look fine, then this is happening, because of the Optimize slide images feature. It is resizing your background images to the size of the slider, just this optimization option doesn't work with specially compressed images, so you should turn this option off, and it will be fine!

There are no arrows

These are the most common reasons why you can't see the arrows on your slider.

1
Plugin conflict

This problem usually happens, when some kind of 3rd party plugin messes with our codes. It's common that a theme, page builder or optimization plugin can't work properly with the data URLs what we use for the arrows by default. Jetpack nowadays commonly causes such problem.

Solution

Go to the Arrow control, find the Base64 option and turn it off. It should solve the problem caused by wrong codes unable to handle base64 images properly.

2
Overflow issue

The other possible cause is when the them has overflow: hidden; codes on the slider's container. This prevents your slider from being full width, and seeing the arrows at the edges. You can use your browser to check if this is the case. The problematic code should be removed from the theme.

3
The arrow and slide background colors are too similar

If you're using the default white arrows, and your slide background images are light as well, it's hard to spot the arrows. Go to the Arrow control and change the arrow colors to something more noticeable, or give them a dark background.

The same problem can happen if you're using the fit Slide background image fill mode and there's no background color behind the slides. You should do the same and change the arrow color or give them a dark background.

Output buffer problem WordPress

Smart Slider 3 uses output buffering to load its own files, which was learned from the biggest plugins. The problem is there are some other plugins which use the output buffering wrongly.

Currently we know these plugins which have the problem:

How to figure out what's causing the problem?

Run a plugin and theme conflict test. When you turn off the plugin (or theme) that has the problematic output buffer codes, the slider will function correctly again.

Mobile-Friendly Test

When Google Mobile Friendly requests a site it often does not wait for the necessary resources (CSS or JS files and images) to load fully. It simply finishes the test after a given time, and because of that, the results are often not accurate.
On real phones this thing doesn't happen, so we suggest checking your site on a real phone and make sure everything is correct there.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.