Modular elements

Carousel

For detail documentation, View Carousel on Bootstrap⟶

Basic Example

<div class="carousel slide" id="carouselExample">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-1.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider One </h3>
          </div>
        </div>
      </section>
    </div>
    <div class="carousel-item">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-3.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider Two </h3>
          </div>
        </div>
      </section>
    </div>
  </div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Indicators

<div class="carousel slide" id="carouselExampleIndicators">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button></div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-1.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider One </h3>
          </div>
        </div>
      </section>
    </div>
    <div class="carousel-item">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-3.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider Two </h3>
          </div>
        </div>
      </section>
    </div>
  </div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Autoplay

<div class="carousel slide" id="carouselExampleAutoPlaying" data-bs-ride="carousel">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button></div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-1.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider One </h3>
          </div>
        </div>
      </section>
    </div>
    <div class="carousel-item">
      <section class="py-9">
        <div class="bg-holder overlay overlay-1" style="background-image: url('../assets/images/main-header-3.jpg')"></div>
        <div class="row align-items-center text-center">
          <div class="col">
            <h3 class="text-white">Slider Two </h3>
          </div>
        </div>
      </section>
    </div>
  </div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoPlaying" 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="#carouselExampleAutoPlaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>