topic Re: CalciteCarousel not rendering as expected. @esri/calcite-components-react@2.13.2 in Calcite Design System Questions

CalciteCarousel not rendering as expected. @esri/calcite-components-react@2.13.2

BurnsideAdmin — Wed, 30 Oct 2024 18:16:49 GMT

@esri/calcite-components-react@2.13.2

I'm having difficulty getting the CalciteCarousel and CalciteCarouselItem components to render properly. They seem to be treated as simple <div>s. I've tried some different props combinations and some css things but nothing seems to render a carousel.

I based my testing on the "Carousel - full height in Panel" example found here

https://developers.arcgis.com/calcite-design-system/components/carousel/

Any suggestions are welcome. Thanks.

Without getting into a lot of detail, here is my code

<div>

<p>Cool thing 1</p>

</div>

</CalciteCarouselItem>

<div>

<p>Cool thing 2</p>

</div>

</CalciteCarouselItem>

<div>

<p>Cool thing 3</p>

</div>

</CalciteCarouselItem>

</CalciteCarousel>

</CalcitePanel>

Re: CalciteCarousel not rendering as expected. @esri/calcite-components-react@2.13.2

Mac_And_Cheese — Thu, 31 Oct 2024 00:09:14 GMT

Are you experiencing issues with any other components, or just Carousel and Carousel Item?

It's hard to say without seeing the rest of the implementation, but if the elements aren't rendering at all, it could be an import issue.

A simple example with the above code seems to work in isolation: Calcite Carousel with React Wrapper

Re: CalciteCarousel not rendering as expected. @esri/calcite-components-react@2.13.2

BurnsideAdmin — Thu, 31 Oct 2024 10:58:41 GMT

Thanks for the quick post, Mac-And_Cheese.

Your example code helped. My app is getting quite large and nowhere had I imported the carousel js. When I added the js imports my code worked.

import "@esri/calcite-components/dist/components/calcite-carousel.js";
import "@esri/calcite-components/dist/components/calcite-carousel-item.js";

Thanks!