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

[BurnsideAdmin]

@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

        <CalcitePanel heading="Working on a carousel" style={{ height: "100%" }}>

          <CalciteCarousel label="Cool things" arrowType="inline">

            <CalciteCarouselItem label="Cool thing 1">

              <div>

                <p>Cool thing 1</p>

              </div>

            </CalciteCarouselItem>

            <CalciteCarouselItem label="Cool thing 2">

              <div>

                <p>Cool thing 2</p>

              </div>

            </CalciteCarouselItem>

            <CalciteCarouselItem label="Cool thing 3">

              <div>

                <p>Cool thing 3</p>

              </div>

            </CalciteCarouselItem>

          </CalciteCarousel>

        </CalcitePanel>

[Mac_And_Cheese · Accepted solution]

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 

[BurnsideAdmin]

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!