Cartzilla component

# Carousel (Slider)

A slideshow component for cycling through elements (images or slides with various content) like a carousel.

The Carousel component relies on the Swiper plugin. To use a carousel, make sure to include the required reference to the plugin's .css and .js files.

CSS file is linked in the `<head>` section and above `theme.min.css` reference in your document:

    <link rel="stylesheet" href="assets/vendor/swiper/swiper-bundle.min.css">

JavaScript file is linked before the closing `</body>` tag and above `theme.min.js` reference in your document:

    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

You can apply virtually any slider option by specifying it within the `data-swiper="{}"` attribute in JSON format.

Usefull links:

- Swiper slider demos with code examples
- Swiper slider API: options, methods and events

#### Navigation (Prev / next buttons)

    <!-- You can use any available button style as Carousel controls -->

    <!-- Large prev/next buttons -->
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-start rounded-circle me-1" aria-label="Prev">
        <i class="ci-chevron-left fs-xl animate-target"></i>
      </button>
      <button type="button" class="btn btn-icon btn-lg btn-outline-secondary animate-slide-end rounded-circle" aria-label="Next">
        <i class="ci-chevron-right fs-xl animate-target"></i>
      </button>
    </div>

    <!-- Normal prev/next buttons -->
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1" aria-label="Prev">
        <i class="ci-chevron-left fs-lg animate-target"></i>
      </button>
      <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle" aria-label="Next">
        <i class="ci-chevron-right fs-lg animate-target"></i>
      </button>
    </div>

    <!-- Small prev/next buttons -->
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-slide-start rounded-circle me-1" aria-label="Prev">
        <i class="ci-chevron-left fs-base animate-target"></i>
      </button>
      <button type="button" class="btn btn-icon btn-sm btn-outline-secondary animate-slide-end rounded-circle" aria-label="Next">
        <i class="ci-chevron-right fs-base animate-target"></i>
      </button>
    </div>

#### Pagination

1
2
3
1
2
3
1
2
3
1
2
3

    <!-- Pagination: Bullets -->
    <div class="swiper hover-effect-opacity" data-swiper='{
      "spaceBetween": 20,
      "loop": true,
      "pagination": {
        "el": ".swiper-pagination",
        "clickable": true
      },
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
          </div>
        </div>
      </div>

      <!-- Prev button -->
      <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
          <i class="ci-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next button -->
      <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
          <i class="ci-chevron-right fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Bullets -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- Pagination: Progress bar -->
    <div class="swiper hover-effect-opacity" data-swiper='{
      "spaceBetween": 20,
      "pagination": {
        "el": ".swiper-pagination",
        "type": "progressbar"
      },
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
          </div>
        </div>
      </div>

      <!-- Prev button -->
      <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
          <i class="ci-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next button -->
      <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
          <i class="ci-chevron-right fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Progress bar -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- Pagination: Fraction -->
    <div class="swiper hover-effect-opacity" data-swiper='{
      "spaceBetween": 20,
      "pagination": {
        "el": ".swiper-pagination",
        "type": "fraction"
      },
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
          </div>
        </div>
      </div>

      <!-- Prev button -->
      <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-prev btn-icon btn-outline-secondary rounded-circle animate-slide-start" aria-label="Prev">
          <i class="ci-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next button -->
      <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 hover-effect-target opacity-0">
        <button type="button" class="btn btn-next btn-icon btn-outline-secondary rounded-circle animate-slide-end" aria-label="Next">
          <i class="ci-chevron-right fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Fraction -->
      <div class="swiper-pagination text-body-secondary fs-6 opacity-50 fw-semibold mb-2"></div>
    </div>

    <!-- Pagination: Scrollbar -->
    <div class="swiper" data-swiper='{
      "direction": "vertical",
      "mousewheel": true,
      "spaceBetween": 20,
      "scrollbar": {
        "el": ".swiper-scrollbar"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
          </div>
        </div>
      </div>

      <!-- Scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>

#### Multiple slides per view (Responsive)

1
2
3
4

    <!-- Responsive slider with multiple slides, featuring external Prev/Next buttons and bullets positioned outside the slider. -->
    <div class="position-relative px-5">

      <!-- External slider prev/next buttons -->
      <button type="button" id="prev" class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start position-absolute top-50 start-0 translate-middle-y mt-n3" aria-label="Prev">
        <i class="ci-chevron-left fs-lg animate-target"></i>
      </button>
      <button type="button" id="next" class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end position-absolute top-50 end-0 translate-middle-y mt-n3" aria-label="Next">
        <i class="ci-chevron-right fs-lg animate-target"></i>
      </button>

      <!-- Slider -->
      <div class="swiper px-2" data-swiper='{
        "slidesPerView": 1,
        "spaceBetween": 16,
        "loop": true,
        "pagination": {
          "el": ".swiper-pagination",
          "clickable": true
        },
        "navigation": {
          "prevEl": "#prev",
          "nextEl": "#next"
        },
        "breakpoints": {
          "600": {
            "slidesPerView": 2
          },
          "1000": {
            "slidesPerView": 3
          }
        }
      }'>
        <div class="swiper-wrapper">

          <!-- Item -->
          <div class="swiper-slide">
            <div class="ratio ratio-4x3 bg-info-subtle rounded">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">1</div>
            </div>
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <div class="ratio ratio-4x3 bg-success-subtle rounded">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">2</div>
            </div>
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <div class="ratio ratio-4x3 bg-danger-subtle rounded">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">3</div>
            </div>
          </div>

          <!-- Item -->
          <div class="swiper-slide">
            <div class="ratio ratio-4x3 bg-warning-subtle rounded">
              <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">4</div>
            </div>
          </div>
        </div>

        <!-- Pagination (Bullets) -->
        <div class="swiper-pagination position-static mt-3"></div>
      </div>
    </div>

#### Fade transition

First
Second
Third

    <!-- A slider that features a smooth fade transition between slides -->
    <div class="swiper hover-effect-opacity" data-swiper='{
      "effect": "fade",
      "loop": true,
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide rounded">
          <div class="ratio ratio-16x9 bg-info-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">First</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide rounded">
          <div class="ratio ratio-16x9 bg-danger-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Second</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide rounded">
          <div class="ratio ratio-16x9 bg-warning-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">Third</div>
          </div>
        </div>
      </div>

      <!-- Prev button -->
      <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 ms-sm-4 hover-effect-target opacity-0">
        <button type="button" class="btn btn-prev btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-start" aria-label="Prev">
          <i class="ci-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next button -->
      <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 me-sm-4 hover-effect-target opacity-0">
        <button type="button" class="btn btn-next btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-end" aria-label="Next">
          <i class="ci-chevron-right fs-lg animate-target"></i>
        </button>
      </div>
    </div>

#### Thumbnails

1
2
3
4
5
6
7
1
2
3
4
5
6
7

    <!-- A slider equipped with thumbnails that allow users to control and navigate the main slider -->

    <!-- Main slider -->
    <div class="swiper hover-effect-opacity" data-swiper='{
      "spaceBetween": 24,
      "loop": true,
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      },
      "thumbs": {
        "swiper": "#thumbs"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-primary-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">1</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-success-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">2</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-warning-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">3</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-danger-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">4</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-info-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">5</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-body-tertiary rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">6</div>
          </div>
        </div>

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-warning-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-4">7</div>
          </div>
        </div>
      </div>

      <!-- Prev button -->
      <div class="position-absolute top-50 start-0 z-2 translate-middle-y ms-3 ms-sm-4 hover-effect-target opacity-0">
        <button type="button" class="btn btn-prev btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-start" aria-label="Prev">
          <i class="ci-chevron-left fs-lg animate-target"></i>
        </button>
      </div>

      <!-- Next button -->
      <div class="position-absolute top-50 end-0 z-2 translate-middle-y me-3 me-sm-4 hover-effect-target opacity-0">
        <button type="button" class="btn btn-next btn-icon btn-secondary bg-body border-0 rounded-circle animate-slide-end" aria-label="Next">
          <i class="ci-chevron-right fs-lg animate-target"></i>
        </button>
      </div>
    </div>

    <!-- Thumbnails slider -->
    <div class="swiper swiper-load swiper-thumbs pt-2 mt-1" id="thumbs" data-swiper='{
      "loop": true,
      "spaceBetween": 12,
      "slidesPerView": 3,
      "watchSlidesProgress": true,
      "breakpoints": {
        "340": {
          "slidesPerView": 4
        },
        "500": {
          "slidesPerView": 5
        },
        "600": {
          "slidesPerView": 6
        },
        "768": {
          "slidesPerView": 4
        },
        "992": {
          "slidesPerView": 5
        },
        "1200": {
          "slidesPerView": 6
        }
      }
    }'>
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-primary-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">1</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-success-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">2</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-warning-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">3</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-danger-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">4</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-info-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">5</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-body-tertiary rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">6</div>
          </div>
        </div>
        <div class="swiper-slide swiper-thumb">
          <div class="ratio ratio-1x1 bg-warning-subtle rounded">
            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center fs-3 fw-semibold">7</div>
          </div>
        </div>
      </div>
    </div>

#### Synchronized sliders

### First slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

### Second slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

### Third slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.

    <!-- Synchronized sliders example -->
    <div class="row align-items-center">

      <!-- Controlled slider -->
      <div class="col-md-5 mb-4 mb-md-0 pb-1 pb-md-0">
        <div class="swiper" id="images" data-swiper='{
          "allowTouchMove": false,
          "effect": "flip",
          "flipEffect": {
            "slideShadows": false
          },
          "loop": true
        }'>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="ratio ratio-4x3 bg-success-subtle rounded">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
                  <i class="ci-image text-success opacity-75"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="ratio ratio-4x3 bg-warning-subtle rounded">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
                  <i class="ci-image text-warning opacity-75"></i>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="ratio ratio-4x3 bg-info-subtle rounded">
                <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center display-5">
                  <i class="ci-image text-info opacity-75"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Master slider -->
      <div class="col-md-7 ps-xl-5">
        <div class="swiper" data-swiper='{
          "spaceBetween": 32,
          "loop": true,
          "speed": 400,
          "controlSlider": "#images",
          "navigation": {
            "prevEl": "#prev-btn",
            "nextEl": "#next-btn"
          }
        }'>
          <div class="swiper-wrapper text-center text-md-start">
            <div class="swiper-slide">
              <h3>First slide</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
            </div>
            <div class="swiper-slide">
              <h3>Second slide</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
            </div>
            <div class="swiper-slide">
              <h3>Third slide</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius pulvinar dui eu ullamcorper. Donec a nisl sed felis pretium posuere ut vitae arcu.</p>
            </div>
          </div>
        </div>
        <div class="d-flex justify-content-center justify-content-md-start gap-2 pt-2">
          <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1" id="prev-btn" aria-label="Prev">
            <i class="ci-chevron-left fs-lg animate-target"></i>
          </button>
          <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle" id="next-btn" aria-label="Next">
            <i class="ci-chevron-right fs-lg animate-target"></i>
          </button>
        </div>
      </div>
    </div>

Top