Bootstrap 5 Carousel Generator

Carousel Properties
Preview
Generated Code

                    

Basic Settings

  • Set Carousel ID (for unique identification)
  • Adjust carousel height (200px-800px)
  • Set animation interval (time between slides)
  • Choose transition speed

Feature Toggles

  • Controls (prev/next arrows)
  • Indicators (bottom dots)
  • Autoplay
  • Crossfade effect
  • Touch swipe
  • Dark overlay for text

Managing Slides

  • Click “Add Slide” for new slides
  • For each slide:
    • Paste image URL
    • Add title and description
    • Customize button (text, link, style)
  • Remove slides using trash icon

Styling Options

  • Choose caption style (light/dark)
  • Select button colors (primary, secondary, etc.)
  • Adjust overlay transparency

Get Your Code

  • Preview shows live carousel
  • Click “Copy Code” button
  • Paste into your Bootstrap 5 project