How to find center carousel item so to style it
Unanswered
Ojos Azules posted this in #help-forum
Ojos AzulesOP
I want every centered carousel item to be with scale-95.
My code:
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.
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.