Empty space where the slider should be

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

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

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.

MooTools conflict with Gantry 4

JavaScript error:

Uncaught TypeError: Cannot read property 'prop' of undefined

Uncaught (in promise) TypeError: n.call is not a function

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,

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,

MooTools conflict with Breezing Forms 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/breezing-forms/platform/media/system/js/mootools-more.js and remove the following text and save the file: delete Function.prototype.bind;

Caching problem

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

The most common cause if this error, that the CDN cache is not cleared. If you are using CDN, make sure you clear it, maybe try to turn it off, to confirm the problem comes from there. If you do not have CDN, then your problem might be caused by a caching plugin or server cache. Try to clear any cache plugin's cache you have or try to turn them off. If it isn't a caching plugin, then it is server cache. If you know where it has to be cleared, then clear it, but if you aren't sure or it won't help, contact your server host.

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:

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.

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.

CSS or JS files are not available

The most common reason why this happens is that an HTML comment like this was pasted into the <head> area of your site:

<!-- Paste this code right before the </head> tag on every page of your site. -->

Smart Slider was optimized to only load its codes on those pages, where you actually use the slider, and it uses the </head> tag to identify where should it place its CSS and JavaScript files. This HTML comment makes the slider think that the <head> present in it is the real <head> of your site, making the slider insert its codes to the wrong place.

The solution to this problem is to remove the <head> text from the HTML comment, such as:

<!-- Paste this code right before the <head> tag on every page of your site. -->