Alpine JS carousel errors

Marketing & Content Hub Blog, Website & Page Publishing
1

Has anyone tried to include a custom made carousel using alpine js? I have built one that works fine outside of hubspot but when I try to add it to a hubspot page it just says index is not defined, item is not defined etc… I have deferred the script loading and have tried it in the header and footer but nothing works.

Thanks

2

I’ve run into similar issues with Alpine.js on HubSpot. Sometimes, HubSpot’s modules and inline JavaScript can conflict with Alpine’s reactivity. Here are a few things you could try:

  1. Ensure Alpine.js Loads Correctly: Make sure Alpine.js is loaded after HubSpot’s JavaScript to prevent any conflicts. Try adding the script right before the closing </body> tag to be certain it loads last.
  2. Scope Your Variables: HubSpot can sometimes isolate scopes, which may be why index and item aren’t recognized. Try explicitly defining these in your Alpine.js component or use Alpine’s x-init to define them when the component initializes.
  3. Console Check: Check the console for any specific errors related to HubSpot or other JavaScript libraries that may be overriding Alpine’s reactivity.

For more tech resources, you can also check Spotify Premium Apk. Let me know if this helps or if you’ve found a workaround!

3

Thanks for the tips. I was trying to do too much with the text editor. Pulling everything out into its own module fixed the issue.