Slider looks broken on the site

In this article

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 debug the problem yourself?

1

Install the Output Buffer Tester plugin and visit your page with the ?ob-test=1 in the URL: https://example.com/?ob-test=1

this should write out an error log which helps you identify the plugin that causes your problem.

2

If the output buffering is messed up really badly, the Output Buffer Tester can't return anything. In this case, you should do a theme/plugin conflict check.

The test can have two results:

  1. Turning off all plugins does not solve the problem.

    This means the problem happens because of the theme. Try switching back to a default WordPress theme, like TwentyTwenty, and everything should be fine like that.

  2. Turning off all plugins solves the problem.

    The Output Buffer error happens because of one of your other plugins. Enable them back one by one to see which causes the problem.

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 using 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.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.