opts- Type
EmblaOptionsType- Default
- -
- Description
- Embla Carousel options: align, loop, slidesToScroll, etc.
Components / Layout
Carousel
சுழற்சி காட்சி
Carousels display a series of items in a horizontally scrollable track with previous/next controls. Use them for scheme highlights, banners, and media galleries.
சுழற்சி காட்சிகள் ஒரு தொடரில் உருப்படிகளை முந்தைய/அடுத்த கட்டுப்பாடுகளுடன் கிடைமட்ட சுருள் பாதையில் காட்டுகின்றன.
Service highlights carousel
Component preview
Service highlight cardsஅரசு திட்ட அட்டைகள்Structure
Anatomy
4 parts documented for implementation and review.
1
CarouselContent
சுழற்சி உள்ளடக்கம்Horizontal flex container. Items scroll within this.
2
CarouselItem
சுழற்சி உருப்படிrequired<div>Individual slide. Full-width by default (min-w-0 basis-full). Adjust basis for multi-item layouts (basis-1/2, basis-1/3). Can contain any content — cards, images, text.
3
CarouselPrevious
முந்தையது<button>Previous button with ChevronLeft. Auto-disabled at start. 32x32px ghost circle with aria-label. Provides keyboard and pointer navigation.
4
CarouselNext
அடுத்தது<button>Next button with ChevronRight. Auto-disabled at end. Same styling as Previous. Keyboard and pointer accessible.
API
Props
plugins- Type
EmblaPluginType[]- Default
- -
- Description
- Embla plugins (Autoplay, WheelGestures, etc.).
orientation- Type
"horizontal" | "vertical"- Default
"horizontal"- Description
- Scroll direction.
setApi- Type
(api: CarouselApi) => void- Default
- -
- Description
- Exposes the Embla API for programmatic control.
| Prop | Type | Default | Description |
|---|---|---|---|
opts | EmblaOptionsType | - | Embla Carousel options: align, loop, slidesToScroll, etc. |
plugins | EmblaPluginType[] | - | Embla plugins (Autoplay, WheelGestures, etc.). |
orientation | "horizontal" | "vertical" | "horizontal" | Scroll direction. |
setApi | (api: CarouselApi) => void | - | Exposes the Embla API for programmatic control. |
Usage guidance
- Use
basis-4/5onCarouselItemto peek the next slide and signal scrollability. - Wrap the carousel in a padded container (
px-8) so navigation buttons are visible. - Add
opts={{ loop: true }}for infinite looping banners. - Tamil content in slides: apply
font-tamilto text elements insideCarouselItem.
Best practices
Peek the next slide to signal scrollability
அடுத்த சுருக்கை காட்டி உருட்டலை சுட்டவும்
Use basis-4/5 or basis-3/4 on CarouselItem so the edge of the next slide is always visible — users know they can scroll to see more.
CarouselItem-ல் basis-4/5 பயன்படுத்தி அடுத்த சுருக்கின் விளிம்பை எப்போதும் காட்டவும் — பயனர்கள் இன்னும் உருள்வதை அறிவார்கள்.
Don't use full-width slides with no peek
முழு-அகல சுருக்குகளை உள்நோக்கு இல்லாமல் பயன்படுத்தாதே
basis-full items hide all adjacent slides. Users won't know there's more content — especially on mobile where navigation buttons may be hard to see.
basis-full-ல் அனைத்து அடுத்த சுருக்குகளும் மறைக்கப்படும். இன்னும் உள்ளடக்கம் இருப்பதை பயனர்கள் அறிய மாட்டார்கள்.
Keep carousel items focused on one type of content
ஒரே வகை உள்ளடக்கத்தில் சுழற்சி உருப்படிகளை கவனம் செலுத்துங்கள்
Carousels work best when each slide contains the same type of content — all service cards, all news items, or all scheme banners. Mixed content confuses scanning.
ஒவ்வொரு சுருக்கும் ஒரே வகை உள்ளடக்கத்தை — சேவை அட்டைகள், செய்திகள் அல்லது திட்ட பேனர்கள் — கொண்டிருக்கும்போது சுழற்சி சிறப்பாக செயல்படும்.
Don't hide critical actions inside carousel slides
முக்கியமான செயல்களை சுழற்சி சுருக்குகளுக்குள் மறைக்காதே
Primary calls-to-action should always be visible without scrolling. A carousel hides non-visible slides — users may miss the most important item entirely.
முதன்மை செயல் அழைப்புகள் எப்போதும் உருட்டாமல் தெரியும்படி இருக்க வேண்டும். சுழற்சி தெரியாத சுருக்குகளை மறைக்கிறது — பயனர்கள் மிக முக்கியமான உருப்படியை தவறவிடலாம்.