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 (
    <Carousel autoPlay>
      <div style={{ padding: 60, background: 'linear-gradient(45deg, #FF3B30, #FF9500)', color: 'white' }}>1</div>
      <div style={{ padding: 60, background: 'linear-gradient(45deg, #34C759, #30B0C7)', color: 'white' }}>2</div>
      <div style={{ padding: 60, background: 'linear-gradient(45deg, #5856D6, #AF52DE)', color: 'white' }}>3</div>
    </Carousel>
  )
}

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 (
    <Carousel autoPlay={false} showDots={false}>
      <div style={{ padding: 40, background: 'var(--biiba-surface)' }}>Manual Slide A</div>
      <div style={{ padding: 40, background: 'var(--biiba-surface)' }}>Manual Slide B</div>
    </Carousel>
  )
}

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