Carousel
Loading...
Customizer
Judia Builder
Choose your themes & layouts etc.
Select Layouts
Choose your layout.
Vertical
Horizontal
Color Scheme
Choose Light or Dark Scheme.
Light
Dark
Brand
Card Layout
Choose borderless or border layout.
Borderless
Border
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light, Dark or Brand Topbar Color.
Light
Dark
Brand
Topbar Images
Choose Topbar Images.
Slides Only
Use slide class to set carousel with slides. Note the presence of the d-block and w-100 class on carousel images to prevent browser default image alignment.
HTML Preview
<!-- Slides Only -->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner" role="listbox">
<div class="carousel-item carousel-item-next carousel-item-start">
<img class="d-block img-fluid mx-auto" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
</div>
<div class="carousel-item active carousel-item-start">
<img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
</div>
</div>
</div>
With Controls
Use carousel-control-prev and carousel-control-next class with <button> or <a> tag element to show carousel with control navigation.
HTML Preview
<!-- With Controls -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid mx-auto" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
with Indicators
Use carousel-indicators class with <ol> element to show carousel with indicators.
HTML Preview
<!-- With Indicators -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
</div>
<div class="carousel-item active">
<img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
with Captions
Use carousel-caption class to add captions to the carousel.
Sunrise above a beach
You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary.
Working from home little spot
Consistency piques people’s interest is that it has become more and more popular over the years, which is excellent.
Dramatic clouds at the Golden Gate Bridge
Increase or decrease the letter spacing depending on the situation and try, try again until it looks right, and each letter.
HTML Preview
<!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img src="..." alt="" class="d-block img-fluid mx-auto">
<div class="carousel-caption d-none d-md-block text-white-50">
<h5 class="text-white">Sunrise above a beach</h5>
<p>You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary.</p>
</div>
</div>
<div class="carousel-item active">
<img src="..." alt="" class="d-block img-fluid mx-auto">
<div class="carousel-caption d-none d-md-block text-white-50">
<h5 class="text-white">Working from home little spot</h5>
<p>Consistency piques people’s interest is that it has become more and more popular over the years, which is excellent.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." alt="" class="d-block img-fluid mx-auto">
<div class="carousel-caption d-none d-md-block text-white-50">
<h5 class="text-white">Dramatic clouds at the Golden Gate Bridge</h5>
<p>Increase or decrease the letter spacing depending on the situation and try, try again until it looks right, and each letter.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Crossfade Animation
Use carousel-fade class to the carousel to animate slides with a fade transition instead of a slide.
HTML Preview
<!-- With Crossfade Animation -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleFade" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid mx-auto" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Individual carousel-item Interval
Use data-bs-interval=" " to a carousel-item to change the amount of time to delay between automatically cycling to the next item.
HTML Preview
<!-- Individual Slide -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Disable Touch Swiping
Carousels support swiping left/right on touchscreen devices to move between slides.
This can be disabled using the data-bs-touch attribute. The example below also does not include the
data-bs-ride attribute and has data-bs-interval="false" so it doesn’t autoplay.
HTML Preview
<!-- Disable Touch Swiping -->
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Dark Variant
Use carousel-dark class to the carousel for darker controls, indicators, and captions.
Drawing a sketch
Too much or too little spacing, as in the example below, can make things unpleasant for the reader.
Blue clock on a pastel background
In some designs, you might adjust your tracking to create a certain artistic effect asked them what graphic design tips they live.
Working at a coffee shop
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.
HTML Preview
<!-- Dark Variant -->
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>