Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
The Carousel component cycles through a collection of items one page at a time, with optional navigation arrows and a row of dot indicators. The Nettalco preset keeps the indicator strip minimal — short rectangular pills that scale from muted surface tones in the inactive state to {primary.color} when active. Navigation arrow buttons are inherited from the Button/Icon-Button tokens rather than being overridden here.
Angular Usage Example
<p-carousel
[value]="products"
[numVisible]="3"
[numScroll]="1"
[circular]="true"
[autoplayInterval]="4000"
>
<ng-template let-product pTemplate="item">
<div class="border rounded-lg p-4 mx-2">
<img
[src]="product.image"
[alt]="product.name"
class="w-full h-48 object-cover rounded"
/>
<h4 class="mt-3 font-semibold">{{ product.name }}</h4>
<p class="text-muted text-sm">{{ product.price | currency }}</p>
<p-button label="Add to Cart" styleClass="mt-3 w-full" />
</div>
</ng-template>
</p-carousel>
orientation="vertical" and provide a [verticalViewPortHeight] value.
Design Tokens
root
| Token | Value |
|---|
transitionDuration | {transition.duration} |
content
The slide viewport area.
indicatorList
The container row that holds all indicator dots.
| Token | Value |
|---|
padding | 1rem |
gap | 0.5rem |
indicator
Individual indicator buttons.
| Token | Value |
|---|
width | 2rem |
height | 0.5rem |
borderRadius | {content.border.radius} |
focusRing.width | {focus.ring.width} |
focusRing.style | {focus.ring.style} |
focusRing.color | {focus.ring.color} |
focusRing.offset | {focus.ring.offset} |
focusRing.shadow | {focus.ring.shadow} |
Indicator Color Scheme
| State | Light | Dark |
|---|
background | {surface.200} | {surface.700} |
hoverBackground | {surface.300} | {surface.600} |
activeBackground | {primary.color} | {primary.color} |
width: 2rem, height: 0.5rem) rather than circular dots, giving the carousel a modern, streamlined look.
Theme Notes
The indicator.borderRadius inherits {content.border.radius} which makes the pill shape slightly rounded at its ends. To make indicators fully circular, override the token with borderRadius: '50%' and set width equal to height.
The content.gap of 0.25rem leaves a minimal gap between the slide area and the navigation arrows — sufficient for visual separation without wasting space. The active indicator colour is always {primary.color} in both light and dark schemes, ensuring strong contrast with the muted inactive pills.