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?
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'?
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?
Thank you for your feedback! LayerSlider use javascript to calculate the font-size and other values based on the size of the actual device. Probably it overwrote your CSS rules.
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?
Hello Jamie,
Thank you for getting in touch with us!
I've checked your site and as I see there are some javascript errors, which are not related to LayerSlider.
Uncaught TypeError: $ is not a function
You should try to fix them and after that your website should work properly.
Best Regards,
Andrea | 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'?
Hello Jamie,
Thank you for your feedback!
You should try to change the jQuery / $ to jQueryTheme in the initialization code.
Best Regards,
Andrea | Kreatura Support Team
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?
Thanks again!
Hello Jamie,
Thank you for your feedback!
LayerSlider use javascript to calculate the font-size and other values based on the size of the actual device.
Probably it overwrote your CSS rules.
Best Regards,
Andrea | Kreatura Support Team