Carousel

Name: Rence Material
Author: david abalaku

A slideshow component for cycling through elements. Rence Material coordinates transitions and indicators for a premium feel.

Fluid Transitions!

Interactive Example

Auto-playing

Material Design

Beautiful, high-quality design for every screen.

Bootstrap 5 Base

All the power of Bootstrap 5 with Material skin.

Rence Material

Your custom framework — available offline or via CDN.

Bootstrap's carousel is enhanced with rounded containers and Material-style indicators.

Modern Motion!

HTML

<!-- Carousel with indicators and controls -->
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1"></button>
  </div>

  <div class="carousel-inner rounded-4 shadow">
    <div class="carousel-item active">
      <div class="p-5 text-center text-white" style="background:#152d61; min-height:200px;">
        <h5>First slide label</h5>
        <p>Material Design 3 aesthetic applied to carousels.</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="p-5 text-center text-white" style="background:#185abc; min-height:200px;">
        <h5>Second slide label</h5>
        <p>Responsive and tactile interactions.</p>
      </div>
    </div>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>