Images Missing From Slider

Are images from your slider missing on your live site? This article should help you resolve the issue.

Table of Contents

Why Aren’t My Images Showing?

If you’re having trouble with images missing from your slider [?] A slider is a type of module that contains multiple slides. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels.

The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.
, or from any other type of module [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
, there are a few possible issues that could be the root cause. This article proposes a series of possible solutions that will help you either resolve the problem, or at minimum narrow down the source.

We recommend stepping through each of the sections below one at a time. After completing each section, refresh the page your module is on to check if its images have been made visible once again.

When you’re done with this article, either the issue will be solved, or we’ll be in a more informed position to help determine what the source of the problem is.

Update Your Domain Using the Domain-Switch Addon

If you have recently switched your site’s old domain with a new domain, images in your modules might still be using the old domain’s URL.

You’ll need to replace the domain name in the URL of each image with the new domain name to resolve this issue.

To simplify this cumbersome task we have built an Addon [?] Addons extend the functionality of Slider Revolution, adding new controls to the module editor and allowing you to do extra things with your design.

For example, using the particle addon you can create effects such as falling snow, and using the distortion addon you can create shimmering effects such as simulating being underwater.

There are dozens of addons available, all included with the full version of Slider Revolution.
called Domain-Switch that can help you change the URLs with minimal steps.

Follow the steps below after installing the Domain Switch Addon.

Go to the Slider Revolution Plugin dashboard:

Click on the AddOns tab:

The Addons dialogue box will appear. Click the Domain Switch thumbnail to access the addon’s functionality directly within the box:

After clicking the thumbnail two fields will appear in the box’s right sidebar.

Add the complete old URL in the provided Old Domain field:

Add the complete new domain URL in the New Domain field:

Hit the button labeled Save Configuration:

This should replace all the URLs of the images from a slider with the new domain URL. After saving the settings you can disable the Domain Switch addon.

Note: We recommend creating a full backup of a website before switching the domain name.

Update WordPress, Themes and Plugins

An outdated version of WordPress, or outdated themes and plugins, could also cause issues with image display in modules.

Check and make sure you have the latest versions of WordPress, as well as the latest version of your theme and any third-party plugins installed on your site.

To learn how to update everything on your site, as well as enabling automatic updates to protect yourself from future issues, we recommend you follow these official guides at WordPress.org:

Script files of the Slider Revolution Plugin usually load early among the sequence of items that are loaded into your site.

Sometimes problems can be solved by making these files load later, through moving them to the site’s “footer” via the Global Settings of the plugin. As an added bonus, doing this can also give a boost to the page’s load speed.

Follow the steps below to move the scripts in the footer.

Go To Global Settings

Go to the main Slider Revolution admin area and click on Globals from the top bar:

The Global Settings dialogue box will appear.

On the left side of the dialogue box, toggle the Insert Scripts In Footer option to ON:

Directly below that option, toggle the Defer JavaScript Loading option to ON:

global-JS-footer-DeferJS

Click the Save Global Settings button:

Inserting the scripts from the Slider Revolution plugin into the footer prevents some types of conflicts, however there are also other types of conflicts that can occur.

So if the above doesn’t solve your problem, carry on and try the solutions described below.

Activate No Conflict Mode and Move JS to Body

If inserting the scripts from the Slider Revolution Plugin into the footer did not resolve the issue, you can turn on a No Conflict mode that will help prevent conflicts with installed themes, third-party plugin(s) and other Slider Revolution internal libraries.

Technical note: Activating this mode calls the jQuery.noConflict() method.

You can also activate a JS to Body option that moves the JS (JavaScript) scripts from each module to the same location as the HTML of that module. This is a similar solution to moving scripts to the footer, but moves the scripts of a specific module rather than of the whole plugin.

This option is used when the module is not loading normally due to third-party themes or plugins adding filters for the scripts loading on the page.

No Conflict mode and JS to Body can be enabled for individual modules one at a time, so to activate them on all your modules follow the steps below for each.

Go To Advanced Settings in Your Module

Mouse hover on your module and click on its pencil icon to edit:

Go to the Module General Options tab from Sidebar in the Module Editor [?] The "Module Editor" is the tool used to create & modify modules.

Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options.
. Click on the Advanced sub-section:

Activate “No Conflict” and “Put JS to Body” Toggles

Scroll down to JQuery & Output Filters panel:

Toggle the jQuery No Conflict Mode option to ON:

Toggle the Put JS to Body option to ON:

Click the Save button:

The module will now load in No-Conflict mode with its JS scripts moved to the body.

However, because a WordPress site can have many moving parts it’s still possible some conflicts could be occurring. So if the problem hasn’t yet gone away, run a conflict test by following the steps in the section coming up next.

Run A Conflict Test

There’s a possibility there could be a conflict between the Slider Revolution plugin and your theme, or any third-party plugins that may be installed on your site.

To find out if there is a conflict occurring, perform a conflict test as described below:

Step 1: Disable all plugins except the Slider Revolution plugin.

Step 2: Deactivate your current theme and instead activate any official theme by WordPress. For example, Twenty-Twenty-One or Twenty-Twenty.

Step 3: Go to the page where the issue was occurring and reload the page.

Step 4(a): If the issue still occurs this shows it was not caused by a conflict with your theme or plugins, so you can re-activate all your plugins and switch back to your main theme. You can skip the rest of the steps in this sequence and move to the next section of the article, on disabling lazy loading.

Step 4(b): If the issue goes away, this shows it was caused by a conflict and we now just need to identify which theme or plugin the conflict is with.

First, re-activate your theme, then refresh the page with your module. If the issue returns you know the conflict is with your theme, and you can skip to step 5.

Otherwise, re-activate all your plugin(s) one by one, refreshing the page after each. When you see the issue return you know the plugin you reactivated most recently is the one with which there’s a conflict.

Step 5: If you found a conflict with a plugin, and it was an image optimization or cache plugin, try the solutions described in the Disable Lazy Load and Revert Image Optimization sections below.

If you found a conflict with a different type of plugin, or with a theme, please contact our support team via opening a ticket or sending us an email. Include the results from the conflict test so we can help find a solution that gets everything working nicely together.

Note: If you are testing for conflicts on a live site, always be cautious. A backup before you begin is recommended.

Disable Lazy Load

Lazy loading, (a.k.a asynchronous loading), delays the loading of media files in modules until they’re required. This process is used to decrease the loading time of modules and make them visible and interactive sooner.

The Slider Revolution plugin has built-in lazy loading functionality. However, there are also other plugins that offer the same kind of functionality, and if a third-party plugin and Slider Revolution are both trying to handle lazy loading at the same time this could break image URLs on the live page.

If you have a third-party plugin you’re using for lazy loading and you’d prefer to have it continue to handle this functionality, you can disable Slider Revolution’s lazy loading in your module.

Note: If you discovered, through one of the conflict tests described above, that you have an issue with an image optimization or cache plugin, disabling lazy loading may resolve that conflict.

Open the module in question in the Module Editor, navigate to the Module General Options tab in the Sidebar, then click on the Advanced sub-section:

Inside the Loading Type panel you can find the Lazy Loading option. Select No Lazy Loading from its dropdown:

Hit the Save button:

The module will now be free to have its lazy loading handled by a third-party plugin instead, solving any potential conflict that may have been occurring.

Is The Issue Still Persisting? Contact our Support Team

By following the steps above you can troubleshoot most of the problems that most commonly turn out to be the reason for images missing from a module. And if the problem isn’t yet solved, narrowing down the source of the issue can yield very helpful information you can share with our support team.

If, after trying the above solutions, you are still encountering the issue, don’t hesitate to open a support ticket or drop us an email at [email protected], we’re always happy to help.

Images Missing From Slider

The Author

Kashif

Technologist, Writer, Philosopher, and above all a problem-solver. Living by the motto "Be the reason someone smiles today".

Liked this Post?
Please Share it!

3 thoughts on “Images Missing From Slider

  1. Hello! I bought the Sonar Mandala theme with the Slider Revolution plugin pre-installed. At first everything was fine, but when I started to fill in the content, the plugin stopped working together with the Sonar plugin. They work separately, but they don’t want to work together. What should I do?

    1. Hi,

      thanks for your email and the interest in our plugin. Also sorry to read about your struggles but we can only give support to our customers.

      As you have received the free version of our plugin bundled with a theme, you are the theme author’s customer and there are two options:

      1. Please contact the theme author for support directly as she/he is responsible for supporting all bundled plugins https://help.market.envato.com/hc/en-us/articles/213762463-Bundled-Plugins#support , same goes for plugin updates https://help.market.envato.com/hc/en-us/articles/213762463-Bundled-Plugins#update

      2. If you need direct support from us and live updates among the other premium benefits, you can purchase a plugin license from us here:
      https://www.sliderrevolution.com/pricing

      The license key you receive will allow you to submit a ticket to our support system https://support.sliderrevolution.com where we can look into this for you. Also, as a premium member, you will receive the benefits listed here https://www.sliderrevolution.com/premium-slider-revolution/

      Cheers, Dirk @ Slider Revolution

  2. This worked for me. Thanks for the great article. These things can be really time-consuming if not for such great articles!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.