Empty space where the slider should be

In this article

Here are the possible reasons when you're only seeing the loading animation, or an empty space instead of your slider.

JavaScript error on the page

This is the most likely cause of the issue. You can use your browser to figure out whether you have a JavaScript error or not, and what's causing it.

Common possible sources

1
JavaScript error: Uncaught TypeError: Cannot read property 'img' of undefined

This error can happen for two common reasons:

  1. You have apostrophe (') or some special character in your Slide background image's or maybe image related layer's file name. We try to fix issues related to this, but you shouldn't use special characters in file names, because even if our code allows them, some browsers have problems with them, and for example WordPress filters out these characters, when you are uploading files as well.
  2. when you use some kind of lazy loading plugin, that modifies our code and removes the image URL. Run a plugin/theme conflict test to see if this is the case
2
JavaScript minification

There are JavaScript minifying plugins, which aren't putting the JavaScript codes properly into their files in the order they found them or they are just making errors by trying to minify JavaScript codes (not necessarily ours, but something before our code). The Async option can help with this, because that is using a different method to call in our JavaScript files, and usually minification plugins are skipping our code like that. But if the error comes from another code, you should rather turn off this JavaScript minification or remove the plugin/extension from your website causing the error in the minified file.

3
GSAP is disabled

JavaScript error: ReferenceError: NextendTimeline is not defined

This error can happen, when you turn off the GSAP loading from the slider, you don't have anything else on your site which loads GSAP. (GSAP is the animation system of our slider.) You should go to Global settings → Framework settings and turn on the Load GSAP on frontend and it will be fine.

4
MooTools conflict with Gantry 4

JavaScript error: Uncaught TypeError: Cannot read property 'prop' of undefined

Mootools overwrites the native .bind() method which can cause a lot of conflict. To fix this issue open gantry/js/mootools.js and remove the following text and save the file: delete Function.prototype.bind,

5
MooTools conflict with RokAjaxSearch plugin

JavaScript error: Uncaught TypeError: Cannot read property 'prop' of undefined

Mootools overwrites the native .bind() method which can cause a lot of conflict. To fix this issue open wp-content/plugins/wp_rokajaxsearch/js/mootools.js and remove the following text and save the file: delete Function.prototype.bind,

Website stopped before it should

Right click on your site, choose View page source, and scroll down to the very bottom of your page. You should see the ending of your website:

</body>
</html>

If this is not what you see, check what has the last code. From the classes and ids, or the texts surrounding it you could figure it out what plugin/extension's module do you have there. That is what's causing a PHP error, or you have a server limitation reached, like the memory_limit. You could try to make your website write out the error like this:

1
WordPress

Write this code inside your wp-config.php file right under the <?php part:

error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set("log_errors", 1);
ini_set("error_log", dirname(__FILE__)."/php-error.log");
	

Then go the page where the problem happened, and check the very bottom of your page. Sometimes you can't see the message on the frontend, because it's behind something, or it's hidden, so you could right click, and check the page's source again, the very bottom of it. Also a php-error.log file should appear in the root folder of your site (http://example.com/php-error.log), what you could check too. If you don't see any errors, and on your other pages you have the same issue, that you don't see the end of the code in the end, then the problem will be your theme, that something might have been accidentally deleted.

2
Joomla

Go to the System >→ Global Configuration → Server, and change the Error reporting to Maximum:

then go to your website, and check the very bottom of your page. Sometimes you can't see the message on the frontend, because it's behind something, or it's hidden, so you could right click, and check the page's source again, the very bottom of it. If you don't see any errors, and on your other pages you have the same issue, that you don't see the end of the code in the end, then the problem will be your template, that something might have been accidentally deleted.

Wrong HTML structure

If you wrote a custom theme/template, or modified your existing one, it is common, that the HTML structure is wrong, like the ending </head> is missing, or some other bigger HTML error exists, for example the <body> tag is there twice. If you right click on your website, choose View page source, then you could watch through the code, making sure, that you have a correct HTML structure with these tags:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Or a HTML validator could point out these errors too, just that shows every minor "error", which aren't really causing any problems, and it can be hard to see it through, finding the important mistakes.

Sage framework

When Smart Slider 3 does not show up on a website which is based on Sage framework the app/filters.php file needs to be updated with this code update to the template_include filter:

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