Carousel Properties
Preview
Generated Code
<div class="carousel slide" id="myCarousel" data-bs-ride="carousel" data-bs-interval="5000"> <div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style="transition-duration: 600ms"> <img decoding="async" src="https://cdn.pixabay.com/photo/2023/01/16/22/48/bird-7723465_640.jpg" class="d-block w-100" alt="Natural Landscape" style="height: 500px; object-fit: cover;"> <div class="carousel-caption d-none d-md-block text-light bg-dark-50 bg-dark bg-opacity-50"> <h5>Natural Landscape</h5> <p>Beautiful mountain scenery with a sunset</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> <div class="carousel-item" style="transition-duration: 600ms"> <img decoding="async" src="https://cdn.pixabay.com/photo/2022/03/27/14/32/rotterdam-7095262_640.jpg" class="d-block w-100" alt="Urban Life" style="height: 500px; object-fit: cover;"> <div class="carousel-caption d-none d-md-block text-light bg-dark-50 bg-dark bg-opacity-50"> <h5>Urban Life</h5> <p>Modern cityscape with dramatic lighting</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> <div class="carousel-item" style="transition-duration: 600ms"> <img decoding="async" src="https://images.unsplash.com/photo-1682687221213-56e250b36fdd" class="d-block w-100" alt="Wildlife" style="height: 500px; object-fit: cover;"> <div class="carousel-caption d-none d-md-block text-light bg-dark-50 bg-dark bg-opacity-50"> <h5>Wildlife</h5> <p>Majestic animals in their natural habitat</p> <a href="#" class="btn btn-light">Learn More</a> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>
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