Skip to content

Carousel for applications #154

@RemDelaporteMathurin

Description

@RemDelaporteMathurin

Inserting this html code in the .md file allows to have an autoplaying carousel of clickable cards.

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner" style="padding: 2rem 10%;">
    <div class="carousel-item active">
      <div class="row align-items-center">
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 1</h5>
              <p class="card-text">This is the first card</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">This is the second card</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">This is the third card</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row align-items-center">
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 4</h5>
              <p class="card-text">This is the fourth card</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 5</h5>
              <p class="card-text">This is the fifth card</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-center" style="height: 100%;">
            <div class="card-body">
              <h5 class="card-title">Card 6</h5>
              <p class="card-text">This is the sixth card</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev" style="filter: invert(1); width: 10%;">
    <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" style="filter: invert(1); width: 10%;">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions