Pictures of Slick carousel do now show only after

Question

I am using Slick carousel for this testimonials box:

I have this button to log in using Facebook:

Immediately after a successful Facebook Connect login, the Slick carousel still works but all pictures are broken:

If I click around for example by clicking the logo of the home page to reload the page, everything is fixed and the pictures appear again correctly. What could be the cause of this bug? I noticed that after logging in with Facebook, the URL changes from https://example.net/San-salvador/ to https://example.net/San-salvador/#=. I thought that this #= that is appended might be the cause of the problem and I used this JavaScript code to remove it:

jQuery(document).ready(function($) {
    // Remove #_=_ string from URL when using Facebook Connect.
    if (window.location.href.indexOf('#_=_') > 0) {
        window.location = window.location.href.replace(/#.*/, '');
    }
    ....
    ....
    ....
}

The #= is not appended to the URL anymore, Facebook Connect still works correctly, but the bug is not fixed. Anyone experiencing this bug too and knowing the fix?

I am using Facebook PHP SDK (v.3.2.3): https://github.com/facebookarchive/facebook-php-sdk. I know it is deprecated, but could that be the reason why I am experiencing this bug?

Answer 1

Check the following things to figure out what exactly goes wrong:

• Have you checked the browser console to see what it says?
• Are the image URLs presumably mentioned there as you expect them to be?
• How are you referring the images in your code - relative URLs, relative to the domain root, absolute?

If the main document URL changes (as figured out in the meantime, in comments), then your best bet is probably to use image URLs that are relative to the domain root, beginning with a leading slash:

/path/to/images/file.jpg

- no matter what the URL path of the current page is, this will always point to the same location.