Flex Carousel

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

On this page

Basic Example

Here is a basic example of a flex carousel with five slides. Note the previous/next controls. We recommend using <button> elements, but you can also use <a> elements with role="button".

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>

Usage

Via data attributes

Use data attributes to easily control the position of the flex carousel. data-bs-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to to pass a raw slide index to the flex carousel data-bs-slide-to="2", which shifts the slide position to a particular index beginning with 0.

Via JavaScript

Call flex carousel manually with:

const flexCarousel = new bootstrap.FlexCarousel('#myFlexCarousel')

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Name	Type	Default	Description
`keyboard`	boolean	`true`	Whether the flex carousel should react to keyboard events.
`goRound`	boolean	`false`	Whether the flex carousel go round or have hard stops.

Methods

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. Learn more in our JavaScript docs.

You can create a flex carousel instance with the flex carousel constructor, and pass on any additional options. For example, to manually initialize a flex carousel without keyboard event listeners that goes round and round, you can use:

const myFlexCarouselElement = document.querySelector('#myFlexCarousel')

const flexCarousel = new bootstrap.FlexCarousel(myFlexCarouselElement, {
  keyboard: false,
  goRound: true
})

Method	Description
`dispose`	Destroys an element’s flex carousel. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the flex carousel instance associated to a DOM element. You can use it like this: `bootstrap.FlexCarousel.getInstance(element)`.
`getOrCreateInstance`	Static method which returns a flex carousel instance associated to a DOM element, or creates a new one in case it wasn’t initialized. You can use it like this: `bootstrap.FlexCarousel.getOrCreateInstance(element)`.
`slideNext`	Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the `slid.lbs.flex-carousel` event occurs).
`slidePrevious`	Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the `slid.lbs.flex-carousel` event occurs).

Events

Liander Bootstrap’s flex carousel class exposes two events for hooking into flex carousel functionality. Both events have the following additional properties:

direction: The direction in which the flex carousel is sliding (either "left" or "right").
trigger: The trigger that caused the sliding event ("keydown", "click", "swipe" or "auto")

All flex carousel events are fired at the flex carousel itself (i.e. at the <div class="flex-carousel">).

Event type	Description
`slide.lbs.flex-carousel`	Fires immediately when the `slide` instance method is invoked.

const myFlexCarousel = document.getElementById('myFlexCarousel')

myFlexCarousel.addEventListener('slide.lbs.flex-carousel', event => {
  // do something...
})