# Alpine JS carousel errors

**URL:** <https://community.hubspot.com/t/alpine-js-carousel-errors/119363>\
**Category:** Blog, Website & Page Publishing\
**Tags:** professional\
**Created:** [October 28, 2024, 8:15pm UTC](https://community.hubspot.com/t/alpine-js-carousel-errors/119363 "2024-10-28T20:15:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DGrape74](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DGrape74](https://community.hubspot.com/u/DGrape74)\
**Post date:** [October 28, 2024, 8:15pm UTC](https://community.hubspot.com/t/alpine-js-carousel-errors/119363/1 "2024-10-28T20:15:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jennie1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jennie1/32/204307_2.png) [@Jennie1](https://community.hubspot.com/u/Jennie1)\
**Post date:** [October 29, 2024, 12:07pm UTC](https://community.hubspot.com/t/alpine-js-carousel-errors/119363/2 "2024-10-29T12:07:53Z")

</div>

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](https://thespotifypremiumapks.com/). Let me know if this helps or if you’ve found a workaround!

---

<div class="post-metadata">

**Author:** ![DGrape74](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DGrape74](https://community.hubspot.com/u/DGrape74)\
**Post date:** [October 29, 2024, 1:18pm UTC](https://community.hubspot.com/t/alpine-js-carousel-errors/119363/3 "2024-10-29T13:18:21Z")

</div>

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.