Minitron Carousel
deprecated
A carousel made up of Minitron slides.
Loading
Code
HTML
import { NbhdMinitronCarousel } from '@fbin-web/neighborhood-core';<nbhd-minitron-carousel> </nbhd-minitron-carousel>React
import { NbhdMinitronCarousel } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdMinitronCarousel></NbhdMinitronCarousel>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items
|
MinitronData[]
|
Array of data objects for carousel slides. Each item follows the MinitronData structure. | ||
h1
|
h1
|
boolean
|
false
|
Enable the title element to render as <h1> and reflects to attribute.
|
reversed
|
reversed
|
boolean
|
false
|
Reverse the layout and reflects to attribute. |
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-maxInlineSize and reflects to attribute.
|
shadow
|
shadow
|
boolean
|
false
|
Add shadow effect and reflects to attribute. |
zoom
|
zoom
|
boolean
|
false
|
Enable the hover zoom effect and reflects to attribute. |
mediaOnly
|
media-only
|
boolean
|
false
|
Only display the media as item content and reflects to attribute.
|
alignment
|
alignment
|
left | center | right
|
left
|
The text alignment for the content. |
contentBackground
|
content-background
|
primary-light | secondary-light | primary-dark | secondary-dark | none
|
primary-light
|
Background color for content container. |
background
|
background
|
primary-light | secondary-light | primary-dark | secondary-dark | none
|
none
|
Background color for main component. |
marginTop
|
margin-top
|
none | small | medium | large
|
none
|
Adjust margin above the component. none = 0 small = 24px medium = 48px large = 96px
|
marginBottom
|
margin-bottom
|
none | small | medium | large
|
none
|
Adjust margin below the component. none = 0 small = 24px medium = 48px large = 96px
|
paddingTop
|
padding-top
|
default | none | small | medium | large
|
default
|
Adjust padding to the top of the component. default = component's top padding none = 0 small = 24px medium = 48px large = 96px
|
paddingBottom
|
padding-bottom
|
default | none | small | medium | large
|
default
|
Adjust padding to the bottom of the component. default = component's bottom padding none = 0 small = 24px medium = 48px large = 96px
|
loop
|
loop
|
boolean
|
false
|
Enable infinite carousel looping and reflects to attribute. |
autoplay
|
autoplay
|
boolean
|
false
|
Enable carousel autoplay and reflects to attribute. |
interval
|
interval
|
number
|
5000
|
Autoplay interval in milliseconds and reflects to attribute. |
fade
|
fade
|
boolean
|
false
|
Enable fade transition instead of slide and reflects to attribute. |
speed
|
speed
|
slow | regular | fast
|
regular
|
Carousel transition speed. |
navigationStyle
|
nav-style
|
solid | outlined | ghost
|
solid
|
Navigation button style. |
navigation
|
navigation
|
boolean
|
false
|
Enable navigation arrows and reflects to attribute. |
pagination
|
pagination
|
boolean
|
false
|
Enable pagination dots and reflects to attribute. |
paginationStyle
|
pagination-style
|
circle | line
|
circle
|
Pagination dot style. |
autoplayInterval
|
autoplay-interval
|
2 | 3 | 4 | 5 | 6
|
5
|
Autoplay interval in seconds. |
Item Structure
Each carousel item follows the MinitronData structure:
| Property | Type | Required | Description |
|---|---|---|---|
title
|
string
|
No | Main headline content |
eyebrow
|
string
|
No | Short introductory content above the title |
subtitle
|
string
|
No | Content for secondary title that appears under the main title |
content
|
string
|
No | General content block for descriptive text |
badge
|
string
|
No | Badge text content that appears above other content |
cta
|
CTA
|
No | Call to Action object with href, label, and optional properties |
media
|
Media
|
Yes | Media object containing src, alt, and optional properties for images or videos |
mediaOnly
|
boolean
|
No | When true, only displays the media content without text elements |
CTA Structure
Call-to-Action object structure for buttons and links:
| Property | Type | Required | Description |
|---|---|---|---|
label
|
string
|
Yes | Button or link text |
href
|
string
|
Yes | URL or path for the link destination |
ariaLabel
|
string
|
No | Accessible label for screen readers |
external
|
boolean
|
No | Whether the link opens in a new tab/window |
class
|
string
|
No | Additional CSS class for styling |
Media Structure
Media object structure for images and videos:
| Property | Type | Required | Description |
|---|---|---|---|
src
|
string
|
Yes | Media source URL or path |
alt
|
string
|
Yes | Alternative text for accessibility |
type
|
image | video
|
Yes | Type of media content |
class
|
string
|
No | Additional CSS class for styling |
crop
|
none | center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
No | Crop position when using Widen API |
CSS Parts
CSS parts that can be styled using the ::part() selector:
| Name | Description |
|---|---|
base
|
The main <section> wrapper element for the minitron carousel.
|
container
|
The container wrapper that holds all carousel content. |
carousel
|
The carousel container element. |
wrapper
|
The carousel wrapper that contains all carousel items. |
carousel-item
|
Individual carousel item containers that hold minitron components. |
nav
|
The navigation container for previous/next buttons. |
button-prev
|
The previous navigation button. |
button-next
|
The next navigation button. |
carousel-nav-icon
|
The navigation button icons. |
pagination
|
The pagination dots container. |
autoplay-control
|
The autoplay control button. |
CSS Properties
CSS custom properties that can be used to customize the minitron carousel appearance and layout:
| Property | Default Value |
|---|---|
--nbhd-minitronCarousel-marginInline
|
0 |
--nbhd-minitronCarousel-maxInlineSize
|
none |
--nbhd-minitronCarousel-position
|
relative |
--nbhd-minitronCarousel-shell-boxShadow
|
none |
--nbhd-minitron-paddingBlock
|
var(--nbhd-space-6) |
--nbhd-container-position
|
relative |
--nbhd-carousel-pagination-blockSize
|
auto |
--nbhd-carousel-pagination-insetInlineStart
|
50% |
--nbhd-carousel-pagination-maxInlineSize
|
none |
--nbhd-carousel-pagination-position
|
absolute |
--nbhd-carousel-pagination-textAlign
|
center |
--nbhd-carousel-pagination-transform
|
translateX(-50%) |
--nbhd-carousel-pagination-zIndex
|
1 |
--nbhd-carousel-paginationItem-blockSize
|
8px |
--nbhd-carousel-paginationItem-inlineSize
|
8px |
--nbhd-carousel-paginationItem-borderRadius
|
50% |
--nbhd-carousel-paginationItem-marginInline
|
2px |
--nbhd-carousel-paginationItem-backgroundColor-alpha
|
0.3 |
--nbhd-carousel-nav-blockSize
|
auto |
--nbhd-carousel-nav-inlineSize
|
100% |
--nbhd-carousel-nav-position
|
static |
--nbhd-carousel-navArrow-blockSize
|
37px |
--nbhd-carousel-navArrow-inlineSize
|
37px |
--nbhd-carousel-navArrow-borderRadius
|
50% |
--nbhd-carousel-navArrow-backgroundColor-alpha
|
1 |
--nbhd-carousel-navArrow-transform
|
translateY(-50%) |
--nbhd-carouselContainer-transitionTimingFunction
|
initial |