I recently had to upgrade my Shopify theme, and it uses jquery v.3.5.1. I can't get layerslider to work. When I switch it back to jquery v.3.4.1, Layerslider shows up fine, but it breaks the rest of my theme's code. I tried adding jquery migrate, but it still isn't working. I'm hoping there's a way to resolve this?
Uncaught TypeError: $ is not a function
You should try to fix them and after that your website should work properly.
Best Regards,Kristof Molnar | Kreatura Support Team
I cleared the Uncaught TypeError: $ is not a function error by making sure jquery was loaded first. see attachment. Now, the layerslider starts to show up on the screen, and then quickly vanishes, along with the initially loaded layerslider.kreaturamedia.jquery.js script.
I suspect layerslider's 'checkVersions' is failing to read the jquery version for some reason specific to how my site works, and then 'removeSlider' kicks in.
A bunch of the other plugins/scripts that my site uses have this at the beginning, which seems to identify the jquery script/version: window.jQuery.fn.is_theme_jquery || (window.jQueryBackup = window.jQuery, window.jQuery = window.jQueryTheme),
And at the end, instead of: (jQuery);
they all have this: (jQueryTheme);
I've tried playing around with adding those lines to layerslider.kreaturamedia.jquery.js , but I'm not sure where exactly the first one would go. Thoughts? Or is there a way to override 'checkVersions' or 'removeSlider'?
Attached files: Screenshot 2021-03-29 112202.png
Hello Jamie,Thank you for your feedback!
You should try to change the jQuery / $ to jQueryTheme in the initialization code.
Thank you - that helped! It took some other changes as well, that was definitely part of the solution.
Now that I have Layerslider showing up, I noticed that my css classes aren't being applied consistently like they were before. Primarily with font-size. I tried switching units from rem to px, but it didn't help. I can add font-size in the style tag of the html, but the css classes used to handle that for me perfectly.
Is Layerslider compatible with css variables? Maybe my fairly extensive use of css variables is interfering? (E.g., a css class with font-size: var(--whatever) that isn't translating properly. Any idea why this might be happening?