View on GitHub

Carousel

The carousel component, presents a slideshow for cycling through a series of content.

On this page

Usage

The carousel component can be implemented with HTML markup and attribute configurations.

The component uses the Swiper library.

Examples

Basic example

html

<div class="carousel carousel-navigation-center-overlay">
  <div class="swiper" data-of-carousel='{
      "pagination": "#carousel-pagination-1",
      "navigationNext": "#carousel-btn-next-1",
      "navigationPrev": "#carousel-btn-prev-1"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-1"></div>

  <div class="carousel-navigation">
     <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-1">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-1">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

Slides per view

You can specify the number of slides to show in the viewport with the slidesPerView attribute. The spaceBetween attribute specifies the space (in pixels) between slides.

html

<div class="carousel carousel-navigation-center">
  <div class="swiper" data-of-carousel='{
      "slidesPerView": 3,
      "spaceBetween": 24,
      "pagination": "#carousel-pagination-2",
      "navigationNext": "#carousel-btn-next-2",
      "navigationPrev": "#carousel-btn-prev-2"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-2"></div>

  <div class="carousel-navigation">
     <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-2">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-2">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

Loop & autoplay

Autoplay starts automatically cycling through slides. Loop continues play after the last slide.

Example heading

html

<div class="heading-action">
    <h3>Example heading</h3>
    <div>
        <div class="carousel-navigation">
         <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-3">
          <i class="ofi-caret-left-fill"></i>
        </button>
        <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-3">
          <i class="ofi-caret-right-fill"></i>
        </button>
        </div>
    </div>
</div>

<div class="carousel">
  <div class="swiper" data-of-carousel='{
      "autoplay": true,
      "loop": true,
      "speed": 600,
      "slidesPerView": 3,
      "spaceBetween": 24,
      "pagination": "#carousel-pagination-3",
      "navigationNext": "#carousel-btn-next-3",
      "navigationPrev": "#carousel-btn-prev-3"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-3"></div>
</div>

html

<div class="carousel carousel-navigation-center">
  <div class="swiper" data-of-carousel='{
      "pagination": "#carousel-pagination-4",
      "navigationNext": "#carousel-btn-next-4",
      "navigationPrev": "#carousel-btn-prev-4"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-4"></div>

  <div class="carousel-navigation">
     <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-4">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-4">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

html

<div class="carousel carousel-navigation-center-inside">
  <div class="swiper" data-of-carousel='{
      "pagination": "#carousel-pagination-5",
      "navigationNext": "#carousel-btn-next-5",
      "navigationPrev": "#carousel-btn-prev-5"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-5"></div>

  <div class="carousel-navigation">
     <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-5">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-5">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

html

<div class="carousel carousel-navigation-center-overlay">
  <div class="swiper" data-of-carousel='{
      "pagination": "#carousel-pagination-6",
      "navigationNext": "#carousel-btn-next-6",
      "navigationPrev": "#carousel-btn-prev-6"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-6"></div>

  <div class="carousel-navigation">
     <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-6">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-6">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

Pagination position

You can place the pagination in different positions.

html

<div class="carousel">
  <div class="swiper" data-of-carousel='{
      "pagination": "#carousel-pagination-7"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="d-block w-100" alt="...">
      </div>
    </div>
  </div>

  <div id="carousel-pagination-7" class="carousel-pagination carousel-pagination--top-right"></div>
</div>

The position of the pagination can be modified by adding one of the following modifier classes:

.carousel-pagination--top-left
.carousel-pagination--top-center
.carousel-pagination--top-right
.carousel-pagination--bottom-left
.carousel-pagination--bottom-center
.carousel-pagination--bottom-right

Each class adjusts the position of the pagination according to its description (top or bottom, combined with left, center, or right).

Responsive breakpoints

You can configure different slide display settings based on different viewport widths.

Example heading

html

<div class="heading-action">
    <h3>Example heading</h3>
    <div>
        <div class="carousel-navigation">
         <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-8">
          <i class="ofi-caret-left-fill"></i>
        </button>
        <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-8">
          <i class="ofi-caret-right-fill"></i>
        </button>
        </div>
    </div>
</div>

<div class="carousel">
  <div class="swiper" data-of-carousel='{
      "slidesPerView": 1,
      "spaceBetween": 10,
      "navigationNext": "#carousel-btn-next-8",
      "navigationPrev": "#carousel-btn-prev-8",
      "breakpoints": {
        "sm": {
          "slidesPerView": 2
        },
        "md": {
          "slidesPerView": 3
        },
        "xl": {
          "slidesPerView": 4,
          "spaceBetween": 15
        },
        "1400": {
          "slidesPerView": 5,
          "spaceBetween": 8
        }
      }
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
      <div class="swiper-slide">
        <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
      </div>
    </div>
  </div>
</div>

Future slides visible

It is a carousel design where upcoming slides are partially visible, providing a glimpse of what’s ahead and creating a continuous, engaging visual flow.

Example heading

html

<div class="carousel-future-slides-visible">
  <div class="w-75">
    <div class="heading-action">
        <h3>Example heading</h3>
        <div>
            <div class="carousel-navigation">
             <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-9">
              <i class="ofi-caret-left-fill"></i>
            </button>
            <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-9">
              <i class="ofi-caret-right-fill"></i>
            </button>
            </div>
        </div>
    </div>

    <div class="carousel">
      <div class="swiper" data-of-carousel='{
          "autoplay": true,
          "loop": true,
          "speed": 600,
          "slidesPerView": 2,
          "spaceBetween": 6,
          "pagination": "#carousel-pagination-9",
          "navigationNext": "#carousel-btn-next-9",
          "navigationPrev": "#carousel-btn-prev-9",
          "futureSlidesVisible": true,
          "breakpoints": {
            "md": {
              "spaceBetween": 12
            },
            "lg": {
              "spaceBetween": 24
            }
          }
      }'>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
          <div class="swiper-slide">
            <img src="..." class="img-fluid img-thumbnail w-100" alt="...">
          </div>
        </div>
      </div>

      <div class="carousel-pagination carousel-pagination--bottom-center" id="carousel-pagination-3"></div>
    </div>
  </div>
</div>

Gallery

To create a photo gallery with thumbnails, you can create two separate carousels. The main carousel, which displays one photo at a time, should have the thumbs option defined, pointing to the identifier of the carousel with the thumbnails.

html

<!-- Lightbox options -->
<script data-of-lightbox-config="gallery-1" type="application/json">
  {
    "thumbnails": true
  }
</script>

<!-- Main carousel -->
<div class="carousel mb-2">
  <div class="swiper" data-of-carousel='{
      "thumbs": "#carousel-thumbnails-1"
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-1.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-1.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-2.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-2.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-3.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-3.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-4.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-4.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-5.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-5.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-6.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-6.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-7.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-7.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-8.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-8.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-9.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-9.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-10.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-10.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-11.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-11.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-12.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-12.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-13.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-13.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
      <div class="swiper-slide">
        <figure class="position-relative mb-0">
          <a href="assets/media/sample-gallery-14.jpg" data-of-lightbox='{ "group": "gallery-1" }'>
            <img src="assets/media/sample-gallery-14.jpg" alt="" class="aspect aspect-4x3 object-fit-cover img-fluid">
          </a>
          <figcaption>
            <button type="button" class="opacity-50 position-absolute bottom-0 end-0 translate-middle-x btn btn-circle btn-dark mb-2"
                    style="--bs-btn-padding-x: 2px; --bs-btn-padding-y: 2px;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    data-bs-title="© Hans Muster">
              <i class="ofi-question-circle-fill"></i>
            </button>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

<!-- Thumbnails carousel -->
<div class="carousel carousel-navigation-center">
  <div id="carousel-thumbnails-1" class="swiper" data-of-carousel='{
      "slidesPerView": 2,
      "spaceBetween": 10,
      "navigationNext": "#carousel-btn-next-10",
      "navigationPrev": "#carousel-btn-prev-10",
      "breakpoints": {
        "sm": {
          "slidesPerView": 3
        },
        "md": {
          "slidesPerView": 4
        },
        "xl": {
          "slidesPerView": 5
        },
        "1400": {
          "slidesPerView": 6
        }
      }
  }'>
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-1.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-2.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-3.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-4.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-5.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-6.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-7.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-8.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-9.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-10.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-11.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-12.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-13.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
      <div class="swiper-slide">
        <img src="assets/media/sample-gallery-14.jpg" alt="" class="aspect aspect-16x9 object-fit-cover img-fluid">
      </div>
    </div>
  </div>

  <div class="carousel-navigation">
    <button type="button" class="carousel-button-prev btn btn-square btn-primary" id="carousel-btn-prev-10">
      <i class="ofi-caret-left-fill"></i>
    </button>
    <button type="button" class="carousel-button-next btn btn-square btn-primary" id="carousel-btn-next-10">
      <i class="ofi-caret-right-fill"></i>
    </button>
  </div>
</div>

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options (alphabetically):

Option	Type	Default	Explanation
`autoHeight`	`boolean`	`false`	If enabled, the slider will adapt its height to the height of the current slide.
`autoplay`	`object\|boolean`	`undefined`	Object with autoplay parameters or boolean `true` to enable with default settings.
`breakpoints`	`object`	`undefined`	Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, changing these properties will have an effect: `slidesPerView`, `spaceBetween`.
`loop`	`boolean`	`false`	Set to `true` to enable continuous loop mode. Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be `>= slidesPerView * 2`.
`navigationNext`	`object\|string`	`undefined`	The selector of the element that will work like “next” button after click on it .
`navigationPrev`	`object\|string`	`undefined`	The selector of the element that will work like “prev” button after click on it.
`pagination`	`object\|string`	`undefined`	The selector or the pagination element.
`slidesPerView`	`number\|string`	`1`	Number of slides per view (slides visible at the same time on slider’s container). Pass the `'auto'` value to automatically determine the number.
`spaceBetween`	`string\|number`	`0`	Distance between slides in pixels.
`speed`	`number`	`300`	Duration of transition between slides (in milliseconds).
`thumbs`	`string`	`undefined`	The selector of the carousel element used as thumbs.

Autoplay parameters

Option	Type	Default	Explanation
`delay`	`number`	`3000`	Delay between transitions (in milliseconds).
`disableOnInteraction`	`boolean`	`true`	Set to `false` and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
`pauseOnMouseEnter`	`boolean`	`false`	When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
`reverseDirection`	`boolean`	`false`	Enables autoplay in reverse direction.
`stopOnLastSlide`	`boolean`	`false`	Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode).
`waitForTransition`	`boolean`	`true`	When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition.

Events

Event	Description
`initialized.of.carousel`	This event is fired immediately when the carousel is ready.

const element = document.getElementById('carousel')

element.addEventListener('initialized.of.carousel', () => {
  // do something
})

CSS

Variables

src/scss/_carousel.scss

--#{$prefix}carousel-theme-color: #{$carousel-theme-color};
--#{$prefix}carousel-pagination-color: var(--#{$prefix}carousel-theme-color);
--#{$prefix}carousel-pagination-left: #{$carousel-pagination-left};
--#{$prefix}carousel-pagination-right: #{$carousel-pagination-right};
--#{$prefix}carousel-pagination-bottom: #{$carousel-pagination-bottom};
--#{$prefix}carousel-pagination-top: #{$carousel-pagination-top};
--#{$prefix}carousel-pagination-bullet-size: #{$carousel-pagination-bullet-size};
--#{$prefix}carousel-pagination-bullet-width: #{$carousel-pagination-bullet-width};
--#{$prefix}carousel-pagination-bullet-height: #{$carousel-pagination-bullet-height};
--#{$prefix}carousel-pagination-bullet-border-radius: #{$carousel-pagination-bullet-border-radius};
--#{$prefix}carousel-pagination-bullet-inactive-color: #{$carousel-pagination-bullet-inactive-color};
--#{$prefix}carousel-pagination-bullet-inactive-opacity: #{$carousel-pagination-bullet-inactive-opacity};
--#{$prefix}carousel-pagination-bullet-opacity: #{$carousel-pagination-bullet-opacity};
--#{$prefix}carousel-pagination-bullet-horizontal-gap: #{$carousel-pagination-bullet-horizontal-gap};
--#{$prefix}carousel-pagination-bullet-vertical-gap: #{$carousel-pagination-bullet-vertical-gap};
--#{$prefix}carousel-navigation-center-padding-x: #{$carousel-navigation-center-padding-x};
--#{$prefix}carousel-navigation-center-inside-offset-x: #{$carousel-navigation-center-inside-offset-x};
--#{$prefix}carousel-thumbnail-active-border-color: #{$carousel-thumbnail-active-border-color};
--#{$prefix}carousel-thumbnail-active-border-width: #{$carousel-thumbnail-active-border-width};

Sass variables

src/scss/_variables.scss

$carousel-theme-color:                              $primary;
$carousel-offset-x:                                 12px;
$carousel-offset-y:                                 12px;
$carousel-pagination-left:                          $carousel-offset-x;
$carousel-pagination-right:                         $carousel-offset-x;
$carousel-pagination-bottom:                        $carousel-offset-y;
$carousel-pagination-top:                           $carousel-offset-y;
$carousel-pagination-bullet-size:                   8px;
$carousel-pagination-bullet-width:                  $carousel-pagination-bullet-size;
$carousel-pagination-bullet-height:                 $carousel-pagination-bullet-size;
$carousel-pagination-bullet-border-radius:          50%;
$carousel-pagination-bullet-inactive-color:         #000;
$carousel-pagination-bullet-inactive-opacity:       .2;
$carousel-pagination-bullet-opacity:                1;
$carousel-pagination-bullet-horizontal-gap:         4px;
$carousel-pagination-bullet-vertical-gap:           6px;
$carousel-navigation-center-padding-x:              3.5rem;
$carousel-navigation-center-inside-offset-x:        12px;
$carousel-thumbnail-active-border-color: $primary;
$carousel-thumbnail-active-border-width: 2px;

Carousel

Usage

Examples

Basic example

Slides per view

Loop & autoplay

Example heading

Navigation position

Pagination position

Responsive breakpoints

Example heading

Future slides visible

Example heading

Gallery

Options

Autoplay parameters

Events

CSS

Variables

Sass variables