Content

Carousel

Touch-swipeable content slider with auto-play and indicator dots.

Basic Carousel

A smooth content slider with touch/drag support and auto-play.

'use client'

import React from 'react'
import { Carousel } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 600 }}>
          <Carousel autoPlay>
            <div style={{ width: '100%', height: '100%', background: 'linear-gradient(45deg, #FF3B30, #FF9500)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontSize: 40 }}>1</div>
            <div style={{ width: '100%', height: '100%', background: 'linear-gradient(45deg, #34C759, #30B0C7)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontSize: 40 }}>2</div>
            <div style={{ width: '100%', height: '100%', background: 'linear-gradient(45deg, #5856D6, #AF52DE)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontSize: 40 }}>3</div>
          </Carousel>
        </div>
  )
}

Manual Control

Disable auto-play and hide indicators for a cleaner look.

Manual Slide A

'use client'

import React from 'react'
import { Carousel } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', maxWidth: 600 }}>
          <Carousel autoPlay={false} showDots={false}>
            <div style={{ width: '100%', height: '100%', background: 'var(--biiba-surface)', borderRadius: 12, border: '1px solid var(--biiba-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>Manual Slide A</div>
            <div style={{ width: '100%', height: '100%', background: 'var(--biiba-surface)', borderRadius: 12, border: '1px solid var(--biiba-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>Manual Slide B</div>
          </Carousel>
        </div>
  )
}

Properties

Prop	Type	Default	Description
`children`	`React.ReactNode[]`	—	Main descriptive text or overlay children layout
`autoPlay`	`boolean`	false	Configures the autoPlay option
`interval`	`number`	5000	Transition delay timing in milliseconds
`showDots`	`boolean`	true	If true, renders page pagination indicators at the bottom
`showArrows`	`boolean`	true	If true, renders left/right navigation arrows

Tabs

Progress