Next.js Discord

Discord Forum

How to find center carousel item so to style it

Unanswered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I want every centered carousel item to be with scale-95.

My code:

  <div className="flex justify-center">
                <Carousel
                    opts={{
                        align: "start",
                        watchDrag: true,
                        loop: true
                    }}
                    className="w-full max-w-full"
                >
                    <CarouselContent>
                        {Array.from({ length: 5 }).map((_, index) => (
                            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
                                <div className="p-1">
                                    <Card>
                                        <CardContent className="flex aspect-square items-center justify-center p-6">
                                            <span className="text-3xl font-semibold">{index + 1}</span>
                                        </CardContent>
                                    </Card>
                                </div>
                            </CarouselItem>
                        ))}
                    </CarouselContent>
                    <CarouselPrevious />
                    <CarouselNext />
                </Carousel>
            </div>


For example, carousel item 2 should be scaled at 95%, followed by carousel item 3 also at 95%, while carousel item 1 should return to its normal scale.

0 Replies