Flex Carousel

Liander Bootstrap custom component. Responsive Carousel showing multiple items on larger screens.

On this page

Basic Example

html

<div id="flexCarouselExampleBasic" class="flex-carousel">
  <div class="flex-carousel-container">
    <div class="flex-carousel-inner is-set">
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
    </div>
    <button class="flex-carousel-control-prev" type="button" data-bs-target="#flexCarouselExampleBasic" data-bs-slide="prev">
      <span class="fa fa-angle-left fa-2x text-gray-600"></span>
      <span class="visually-hidden">Vorige</span>
    </button>
    <button class="flex-carousel-control-next" type="button" data-bs-target="#flexCarouselExampleBasic" data-bs-slide="next">
      <span class="fa fa-angle-right fa-2x text-gray-600"></span>
      <span class="visually-hidden">Volgende</span>
    </button>
  </div>
</div>

Initial Slide To Example

Adding attribute data-bs-slide-to the FlexCarousel will slide to the given slide on initialization.

html

<div id="flexCarouselExampleSlideTo" class="flex-carousel" data-bs-slide-to="3">
  <div class="flex-carousel-container">
    <div class="flex-carousel-inner is-set">
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
    </div>
    <button class="flex-carousel-control-prev" type="button" data-bs-target="#flexCarouselExampleSlideTo" data-bs-slide="prev">
      <span class="fa fa-angle-left fa-2x text-gray-600"></span>
      <span class="visually-hidden">Vorige</span>
    </button>
    <button class="flex-carousel-control-next" type="button" data-bs-target="#flexCarouselExampleSlideTo" data-bs-slide="next">
      <span class="fa fa-angle-right fa-2x text-gray-600"></span>
      <span class="visually-hidden">Volgende</span>
    </button>
  </div>
</div>

Go Round Example

By default the FlexCarousel does not go round. It will stop at the first slide when going back and stop at the last slide when going forward. Adding data-bs-go-round with value true will make the FlexCarousel go round.

html

<div id="flexCarouselExampleGoRound" class="flex-carousel" data-bs-go-round="true">
  <div class="flex-carousel-container">
    <div class="flex-carousel-inner is-set">
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-secondary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
      <div class="flex-carousel-item bg-primary">
        <div class="text-center">
          <img src="..." alt="...">
        </div>
      </div>
    </div>
    <button class="flex-carousel-control-prev" type="button" data-bs-target="#flexCarouselExampleGoRound" data-bs-slide="prev">
      <span class="fa fa-angle-left fa-2x text-gray-600"></span>
      <span class="visually-hidden">Vorige</span>
    </button>
    <button class="flex-carousel-control-next" type="button" data-bs-target="#flexCarouselExampleGoRound" data-bs-slide="next">
      <span class="fa fa-angle-right fa-2x text-gray-600"></span>
      <span class="visually-hidden">Volgende</span>
    </button>
  </div>
</div>