Docked Carousel

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/docked-carousel

Usage

import { DockedCarousel } from "@reactbytes/docked-carousel";

export default function Example() {
  return (
    <DockedCarousel />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | animationType | select | expand | The transition effect when changing images. | | shape | select | circle | The border-radius style of the thumbnails. | | color | color | #FFFFFF | Color for navigation arrows and the timer progress border. | | autoSlide | boolean | true | Whether the carousel should automatically cycle through images. | | autoSlideInterval | number | 5000 | Time in milliseconds between auto-slides. | | equalSize | boolean | false | If true, all thumbnails will have the same width instead of the dynamic dock effect. | | showArrows | boolean | true | Toggle visibility of navigation arrows. | | showTimer | boolean | true | Show the progress border on the active thumbnail. | | stiffness | number | 200 | Spring stiffness for pop and expand animations. | | damping | number | 25 | Spring damping for pop and expand animations. | | transitionDuration | number | 1.2 | Duration of the slide animation in seconds. | | showTooltip | boolean | false | Show a tooltip with the item index on hover. |

Presets

This component includes the following design presets:

• Interactive Expansion (Default) (interactive-expansion)
• Cinematic Glide (cinematic-glide)
• Pop Minimalist (pop-minimalist)
• Static Grid (static-grid)
• Fast Tempo (fast-tempo)

Credits & Inspiration

Libraries

• Framer Motion - Animation Engine

Project Author

• ChandruMIT-o - Creator & Lead Designer

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Docked Carousel.