Cache or Minification

Slider only shows up correctly for logged in users, not for logged out users

When you are seeing differences between logged in and logged out users, that always means a cache plugin problem. Cache plugins are working that way, that you are seeing the not cached version when you are logged in, but the cached version where you are logged out. You should try to clear the cache of your website's caching plugin and if that wouldn't work, search for the name of your cache plugin in our documentation in case you find one specifically for that plugin.

We're storing one version of the slider, so if you make changes to the slider, but it doesn't show up that also happens because of a 3rd party cache. Make sure you clear your cache plugin's cache after every change you make in the slider.

WP Rocket

If you are using WP Rocket, you might experience issues with its minification which changes the loading order of our files.

To find the minification/optimization settings of WP Rocket, you have to go to your left WordPress admin menu's Settings → WP Rocket → File Optimization.

Load JavaScript deferred

This option isn't compatible with our codes, so you have to turn it off.

Exclude our files

WP Rocket also has an exclude option, where you should write this to the Excluded CSS Files option:

(.*)smart-slider(.*).css	

and this to the Excluded JavaScript Files:

(.*)smart-slider(.*).js	

You should write this to the Excluded Inline JavaScript

_N2	

These are the places from where we are calling in our files, so this should make the minification to skip them.

You should note, that these "excluded" options only appear in WP Rocket, if you use the minification/combination connected to them. So if you do not use a given minification/combination, you do not need to exclude us.

Delay JavaScript execution

WP Rocket's Delay JavaScript execution feature will delay the loading of the slider, too. If you experience long loading times, maybe you need to interact with the page to make the slider load, then you need to exclude our files and inline codes from this feature. For this, you should add the pattern below, to the Excluded JavaScript Files field that you find under the Delay JavaScript execution setting:

(.*)smart-slider(.*).js
new _N2
this._N2	

WP Rocket CDN

WP Rocket's CDN option has a bug in its current version (2021.05.18.), that it cannot handle urls without http or https within srcsets, like this one:

<picture>
   <source srcset="//example.com/image.svg">
   <img src="//example.com/image.png">
</picture>	

and they are adding cdn twice to the url, while it only should be added once: //cdn.cdn.example.com/image.svg

Until they will resolve it, you should turn it off at your WordPress left admin menu's Settings → WP Rocket → CDN → Enable Content Delivery Network.

Sometimes WP Rocket's CDN lazy loads the images so they're not ready when the slider would need them to calculate the size of the images. Using the WP Rocket → CDN → Exclude files from CDN option try to exclude the images you use in the slider and see if that makes any difference.

Remove unused CSS

The Remove unused CSS option messes up the sliders, so you should add the following to the CSS safelist field to exclude our codes:

.n2-ss-loaded
.n2(.*)
#n2(.*)
ss3(.*)	

WP Fastest Cache

If your Smart Slider doesn't work with the CSS and JS minification of WP Fastest Cache, then you could exclude our files from WP Fastest Cache by adding these words to the CSS and JS url containment exclusion:

smart-slider

and clear the cache of WP Fastest Cache.

JCH Optimize

Go to your Extensions → Plugins, filter out the "system" plugins and move the Smart Slider 3 System Plugin plugin after JCH Optimize (in certain cases you need to move it before JCH Optimize, so you can try that too). This is the order of how codes are running on your website, and this should make JCH Optimize skip our codes. Clear the cache of JCH Optimize after changing the order!

JCH Optimize's image lazy loading

JCH Optimize could have an issue with lazy loading our images.

You should go to your top admin menu's System → Global Configuration → JCH Optimize → Media, and to the Exclude these classes list add: skip-lazy

After that, clear the cache of JCH Optimize.

Nitropack

Nitropack's optimization might cause problems with the slider. Visit https://nitropack.io/user/settings and go to the top Settings menupoint:

There you should turn on Excluded Resources (Images, JavaScript, CSS, etc.). Press Add an Exclude and fill it the following way:

As you can see on the screenshot below:

Nitropack's image lazy loading had bugs too, so if you don't see your images loading, try to exclude their folder. Usually images are stored within the /uploads folder of the server, so you could try to exclude this word as well:

uploads

the same way as you excluded the previous words.

Cloudflare’s Rocket Loader

Rocket Loader from Cloudflare is calling in the JavaScript files after everything else has been loaded, but because of this a lot of JavaScript events are skipped, which are used by many JavaScript developers, so complex codes like ours aren't working with it, and you shouldn't use it.

But according to this article the loaded scripts can be ignored by giving data-cfasync="false" to them. Go to Global settings → Framework and find Script attributes under JavaScript and write this to the field:

data-cfasync='false'

Autoptimize

Autoptimize has an option for Critical CSS. This isn't compatible with our slider, so you should turn it off.

You can try to exclude our CSS and JS files from Autoptimize's minifications by adding our folder to the exclusion list:

Free Smart Slider 3:

wp-content/plugins/smart-slider-3/

Pro Smart Slider 3:

wp-content/plugins/nextend-smart-slider3-pro/

Autoptimize's Aggregate CSS-files? option prevents the fonticons from loading properly. To solve the problem, you should write the following to the Exclude CSS from Autoptimize: field:

fontawesome.min.css, icomoon.min.css, linearicons.min.css, materialicons.min.css, typicons.min.css

Then go to Global settings → Framework and enable Async non-primary CSS to async the fonts from our end.

Litespeed cache

Critical CSS

Litespeed cache has an option for Critical CSS. This isn't compatible with our slider, so you should turn it off.

Other exclusions

You can try to exclude our CSS and JS files from Litespeed cache's minifications by adding the word smart-slider to the exclusion lists:

Load JS Deferred

Litespeed cache's Load JS Deferred execution feature will delay the loading of the slider, too. If you experience long loading times, maybe you need to interact with the page to make the slider load, then you need to exclude our files and inline codes from this feature. For this, you should add the pattern below, to the JS Deferred Excludes field that you find under the LiteSpeed Cache → Page Optimization → [7] Tuning setting:

_N2
n2.min.js
smartslider-frontend.min.js	

SG Optimizer

SG Optimizer's Combine CSS Files option has a bug, that they don't put all removed CSS file's codes within their minified CSS file, so some Smart Slider codes of your website will be missed too. Turn off SG Optimizer → Frontend Optimization → Combine CSS Files and it should solve the problem.

You also shouldn't use their Remove Query Strings from Static Resources option. Query strings are used by developers to tell browsers, that a given file changed. If you remove query strings and update your plugins or theme, those people who have already visited your website will get wrong files!

WP Meteor

The WP Meteor plugin messes with the loading of our codes, so you'll need to exclude everything Smart Slider related from their optimization.

To test if it's actually WP Meteor that causes the problem, add ?wpmeteordisable after the URL where you see the problem. The sliders should load normally afterwards.

Go to WP Meteor → Exclusions tab, turn on "Exclude scripts matching regexp from optimization", and write the following text to the field:

(.*)smart-slider-3(.*)
(.*)smart-slider3(.*)
_N2

If excluding these does not make any difference, contact the developers of WP Meteor, because that means their exclusion doesn't work properly.

W3 Total Cache

The image lazy loading of W3 Total Cache could fail loading our images, so you should turn this option off. You can find it at Performance → General Settings → under User Experience as "Lazy Load Images".

WP Super Cache

This option of WP Super Cache can create issues about our files being called in:

Settings > WP Super Cache > Advanced > Late init

so you should leave it turned off.

WP Compress

If our sliders are forced to load inside iframes (for example if you are using an Ajax theme), then the image optimization of WP Compress won't be compatible with our sliders. Go to WordPress' admin menu Settings → WP Compress → Image Optimization tab → Lazy Loading section → at Native Lazy press the gear icon and add this to the input field:

#skip-lazy

Jetpack

Jetpack's image optimization options can cause various errors:

• Jetpack processes all your HTML codes, which requires a lot of memory. This memory could be reached when many sliders are being used on one page.
• Jetpack's image lazy loading often fails on different browsers, so our images won't load in that case either.
• Jetpack's image lazy loading fails to load base64 encoded images, which is used for example at arrows and other controls.
• Jetpack's "speed up image load times" option can make images not to load at all.

So you should go to Jetpack → Settings → Performance → turn off the "Enable Lazy Loading for images" and "Speed up image load times" options.

Workaround for wrong base64 images

It's a known Jetpack issue that the data URI is stripped from base64 images. They have a workaround, which is adding the following code to your child theme's functions.php file or via a plugin called Code Snippets:

/*
 * Add 'data' for based64 enconcoded images for wp_allowed_protocols()
 * With this, Jetpack Lazy Images will not strip out "data" in the "src" attribute https://github.com/Automattic/jetpack/blob/6.8/modules/lazy-images/lazy-images.php/#L166
 */

add_filter( 'kses_allowed_protocols', 'htdat_kses_allowed_protocols', 10, 1 );
               
function htdat_kses_allowed_protocols( $protocols ) {
  $protocols[] = 'data';
  return $protocols;
}

Ionos Performance

Ionos Performance is not compatible with Smart Slider, so you should make sure it is deactivated on your Plugins list.