Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Carousel component is not working on Astro Framework #2347

Closed
Seokhyeon315 opened this issue Jan 9, 2024 · 7 comments
Closed

Carousel component is not working on Astro Framework #2347

Seokhyeon315 opened this issue Jan 9, 2024 · 7 comments

Comments

@Seokhyeon315
Copy link

I know many people are using NextJS but I tried to use Astro framework for testing several things.
I followed all the instructions of integrate with Shadcn UI with Astro and other components work fine.
But recently added component called Carousel is not working at all in astro. I am wondering if this is only my issue.
It doesn't autoplay, and when I click the arrow button, it doesn't work.
@levino
Copy link

levino commented Jan 9, 2024

Astro does not ship JS by default. Use client:load.

@DaniloTrotta
Copy link

DaniloTrotta commented Jan 9, 2024 •
edited
Loading

I am facing the same problem, of course using client:load on my react component which does not solve the issue. It seems like the api object returned from useEmblaCarousel remains undefined, which leads to the mentioned above behaviour

@levino
Copy link

levino commented Jan 9, 2024

Then I suggest to make a minimal reproduction repository. I have the component working in Astro.

@Seokhyeon315
Copy link
Author

@levino as your suggestion, using client:load at the component and now it works perfectly.
For anyone who has similar question, refer this astro doc

@hgrias
Copy link

hgrias commented Jan 29, 2024

I am still struggling to get the carousel to work. I have installed the component and am trying to use it within a .astro component as so:

---
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
--- 
<main>
  {Other elements..}
  <Carousel client:load>
    <CarouselContent client:load>
      <CarouselItem client:load>...</CarouselItem>
      <CarouselItem client:load>...</CarouselItem>
      <CarouselItem client:load>...</CarouselItem>
    </CarouselContent>
  </Carousel>
</main>

Is this the correct way? I am getting the following error:

useCarousel must be used within a <Carousel />

@ShelbyJenkins
Copy link

ShelbyJenkins commented Jan 30, 2024 •
edited
Loading

@hgrias

I just worked through this with the help of this guide I found: https://spacemadness.dev/docs/add-a-shadcn-ui-component/

Here is what worked for me.

In src/components/PortfolioCarousel.tsx

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
import { Card, CardContent } from "@/components/ui/card"

export default function PortfolioCarousel() {
	return (
<Carousel className="w-full max-w-xs">
    <CarouselContent>
      {Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem key={index}>
          <div className="p-1">
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">{index + 1}</span>
              </CardContent>
            </Card>
          </div>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
	)
}

in index.astro

---
import PortfolioCarousel from "../components/PortfolioCarousel";
---
<!doctype html>
<html lang="en">
	<body>
		<main>
			<h1>Hello There</h1>
			<PortfolioCarousel client:load />
		</main>
	</body>
</html>

I don't know if this is the only way, but it's working for me.

@trespaul trespaul mentioned this issue Mar 2, 2024
Closed
@clemesilva
Copy link

i need to insatall some pakages or something? i dont find the place where is the install

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@levino @hgrias @ShelbyJenkins @Seokhyeon315 @DaniloTrotta @clemesilva