#Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Bootstrap docs: https://getbootstrap.com/docs/5.3/components/carousel/

#Syntax

$Bootstrap = new renderabootstrap5component();
echo $Bootstrap->carousel($aItems, [$aOptions])

Parameters: 2

array of carousel items to rotate; per item


src {string} image url


class {string} css classes; default: “d-block w-100”


alt {string} alt text

array of options



id {string} optional: id of carousel wrapper div


Flags

enabletouch {bool} default: true
autoplay {bool} default: false
controls {bool} default: true

#Example

#PHP snippet

$Bootstrap->carousel([
  0 => [
    'src' => 'assets/images/thispersondoesnotexist-0.jpg',
    'imgtitle' => 'Guess',
    'imgtext' => 'This person does not exist',
  ],
  1 => [
    'src' => 'assets/images/thispersondoesnotexist-1.jpg',
    'imgtitle' => 'Guess',
    'imgtext' => 'This person does not exist',
  ],
],
[
]);

#Generated html output

<div id="carousel1" class="carousel slide" data-bs-touch="false">
  
  <!-- Indicators -->
  <button data-bs-target="#carousel1" data-bs-slide-to="0" class=" active" aria-current="true" aria-label="Slide 1">
  </button>
  <button data-bs-target="#carousel1" data-bs-slide-to="1" class="" aria-current="true" aria-label="Slide 2">
  </button>
  
  <!-- Slides -->
  <div class="carousel-item active">
    <img  src="assets/images/thispersondoesnotexist-0.jpg" class="d-block w-100"/>
    <div class="carousel-caption d-none d-md-block">
      <h5>
        Guess
      </h5>
      <p>
        This person does not exist
      </p>
    </div>
  </div>
  <div class="carousel-item">
    <img  src="assets/images/thispersondoesnotexist-1.jpg" class="d-block w-100"/>
    <div class="carousel-caption d-none d-md-block">
      <h5>
        Guess
      </h5>
      <p>
        This person does not exist
      </p>
    </div>
  </div>
  
  <!-- navigation buttons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" 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="#carousel1" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true">
    </span>
    <span class="visually-hidden">
      Next
    </span>
  </button>
  
</div>