Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Carousel (Slider)

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

Silicon component

Carousel component depends on Swiper plugin. Make sure to link to Swiper css and js files in your document:

- assets/vendor/swiper/swiper-bundle.min.css
- assets/vendor/swiper/swiper-bundle.min.js

Use this page as a reference.

You can pass almost any slider option to `data-swiper-options='{}'`

Usefull links

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

## Navigation (Prev / next buttons)

    <!-- Extra large prev/next buttons -->
    <button type="button" class="btn btn-prev btn-icon btn-xl me-2">
      <i class="bx bx-chevron-left"></i>
    </button>
    <button type="button" class="btn btn-next btn-icon btn-xl ms-2">
      <i class="bx bx-chevron-right"></i>
    </button>

    <!-- Large prev/next buttons -->
    <button type="button" class="btn btn-prev btn-icon btn-lg me-2">
      <i class="bx bx-chevron-left"></i>
    </button>
    <button type="button" class="btn btn-next btn-icon btn-lg ms-2">
      <i class="bx bx-chevron-right"></i>
    </button>

    <!-- Normal prev/next buttons -->
    <button type="button" class="btn btn-prev btn-icon me-2">
      <i class="bx bx-chevron-left"></i>
    </button>
    <button type="button" class="btn btn-next btn-icon ms-2">
      <i class="bx bx-chevron-right"></i>
    </button>

    <!-- Small prev/next buttons -->
    <button type="button" class="btn btn-prev btn-icon btn-sm me-2">
      <i class="bx bx-chevron-left"></i>
    </button>
    <button type="button" class="btn btn-next btn-icon btn-sm ms-2">
      <i class="bx bx-chevron-right"></i>
    </button>

## Pagination

    <!-- Pagination: Bullets -->
    <div class="swiper swiper-nav-onhover" data-swiper-options='{
      "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-secondary">
            <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-secondary">
            <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-secondary">
            <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 -->
      <button type="button" class="btn btn-prev btn-icon btn-sm me-2">
        <i class="bx bx-chevron-left"></i>
      </button>

      <!-- Next button -->
      <button type="button" class="btn btn-next btn-icon btn-sm ms-2">
        <i class="bx bx-chevron-right"></i>
      </button>

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

    <!-- Pagination: Progress bar -->
    <div class="swiper swiper-nav-onhover" data-swiper-options='{
      "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-secondary">
            <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-secondary">
            <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-secondary">
            <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 -->
      <button type="button" class="btn btn-prev btn-icon btn-sm me-2">
        <i class="bx bx-chevron-left"></i>
      </button>

      <!-- Next button -->
      <button type="button" class="btn btn-next btn-icon btn-sm ms-2">
        <i class="bx bx-chevron-right"></i>
      </button>

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

    <!-- Pagination: Fraction -->
    <div class="swiper swiper-nav-onhover" data-swiper-options='{
      "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-secondary">
            <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-secondary">
            <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-secondary">
            <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 -->
      <button type="button" class="btn btn-prev btn-icon btn-sm me-2">
        <i class="bx bx-chevron-left"></i>
      </button>

      <!-- Next button -->
      <button type="button" class="btn btn-next btn-icon btn-sm ms-2">
        <i class="bx bx-chevron-right"></i>
      </button>

      <!-- Pagination -->
      <div class="swiper-pagination text-muted fs-4 lh-1 opacity-50 fw-bold"></div>
    </div>

    <!-- Pagination: Pager -->
    <div class="swiper swiper-pager swiper-nav-onhover" data-swiper-options='{
      "spaceBetween": 20,
      "loop": true,
      "pager": true,
      "navigation": {
        "prevEl": ".page-prev",
        "nextEl": ".page-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Item -->
        <div class="swiper-slide">
          <div class="ratio ratio-16x9 bg-secondary">
            <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-secondary">
            <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-secondary">
            <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>

      <!-- Pagination (pager) -->
      <nav class="pagination d-flex justify-content-center position-absolute bottom-0 zindex-2 start-50 translate-middle-x px-2 mb-3">
        <div class="page-item me-2">
          <a class="page-link page-prev btn-icon btn-sm" href="#">
            <i class="bx bx-chevron-left"></i>
          </a>
        </div>
        <ul class="list-unstyled d-flex justify-content-center mb-0"></ul>
        <div class="page-item ms-2">
          <a class="page-link page-next btn-icon btn-sm" href="#">
            <i class="bx bx-chevron-right"></i>
          </a>
        </div>
      </nav>
    </div>

## Multiple slides (Responsive) + Arrows and bullets outside

Business 12 hours ago

### How agile is your forecasting process?

Enterprise 1 day ago

### A future with high public debt: low-for-long is not low forever

Finance Nov 24, 2021

### Understanding the rise in long-term rates

Ticks & Trips Oct 13, 2021

### Stocks making the biggest moves after hours

    <!-- Multiple slides responsive slider with external Prev / Next buttons and bullets outside -->
    <div class="position-relative px-xl-5">

      <!-- Slider prev/next buttons -->
      <button type="button" id="prev-news" class="btn btn-prev btn-icon btn-sm position-absolute top-50 start-0 translate-middle-y d-none d-xl-inline-flex">
        <i class="bx bx-chevron-left"></i>
      </button>
      <button type="button" id="next-news" class="btn btn-next btn-icon btn-sm position-absolute top-50 end-0 translate-middle-y d-none d-xl-inline-flex">
        <i class="bx bx-chevron-right"></i>
      </button>

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

            <!-- Item -->
            <div class="swiper-slide h-auto pb-3">
              <article class="card h-100 border-0 shadow-sm mx-2">
                <div class="position-relative">
                  <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                  <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                    <i class="bx bx-bookmark"></i>
                  </a>
                  <img src="assets/img/landing/financial/news/01.jpg" class="card-img-top" alt="Image">
                </div>
                <div class="card-body pb-4">
                  <div class="d-flex align-items-center justify-content-between mb-3">
                    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Business</a>
                    <span class="fs-sm text-muted">12 hours ago</span>
                  </div>
                  <h3 class="h5 mb-0">
                    <a href="#">How agile is your forecasting process?</a>
                  </h3>
                </div>
                <div class="card-footer py-4">
                  <a href="#" class="d-flex align-items-center text-decoration-none">
                    <img src="assets/img/avatar/40.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                      <h6 class="fs-base fw-semibold mb-0">Marvin McKinney</h6>
                      <span class="fs-sm text-muted">Deputy Director, Capital Department</span>
                    </div>
                  </a>
                </div>
              </article>
            </div>

            <!-- Item -->
            <div class="swiper-slide h-auto pb-3">
              <article class="card h-100 border-0 shadow-sm mx-2">
                <div class="position-relative">
                  <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                  <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                    <i class="bx bx-bookmark"></i>
                  </a>
                  <img src="assets/img/landing/financial/news/02.jpg" class="card-img-top" alt="Image">
                </div>
                <div class="card-body pb-4">
                  <div class="d-flex align-items-center justify-content-between mb-3">
                    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Enterprise</a>
                    <span class="fs-sm text-muted">1 day ago</span>
                  </div>
                  <h3 class="h5 mb-0">
                    <a href="#">A future with high public debt: low-for-long is not low forever</a>
                  </h3>
                </div>
                <div class="card-footer py-4">
                  <a href="#" class="d-flex align-items-center text-decoration-none">
                    <img src="assets/img/avatar/04.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                      <h6 class="fs-base fw-semibold mb-0">Jenny Wilson</h6>
                      <span class="fs-sm text-muted">Financial Sector Expert</span>
                    </div>
                  </a>
                </div>
              </article>
            </div>

            <!-- Item -->
            <div class="swiper-slide h-auto pb-3">
              <article class="card h-100 border-0 shadow-sm mx-2">
                <div class="position-relative">
                  <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                  <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                    <i class="bx bx-bookmark"></i>
                  </a>
                  <img src="assets/img/landing/financial/news/03.jpg" class="card-img-top" alt="Image">
                </div>
                <div class="card-body pb-4">
                  <div class="d-flex align-items-center justify-content-between mb-3">
                    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Finance</a>
                    <span class="fs-sm text-muted">Nov 24, 2021</span>
                  </div>
                  <h3 class="h5 mb-0">
                    <a href="#">Understanding the rise in long-term rates</a>
                  </h3>
                </div>
                <div class="card-footer py-4">
                  <a href="#" class="d-flex align-items-center text-decoration-none">
                    <img src="assets/img/avatar/05.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                      <h6 class="fs-base fw-semibold mb-0">Albert Flores</h6>
                      <span class="fs-sm text-muted">Financial Counsellor and Director</span>
                    </div>
                  </a>
                </div>
              </article>
            </div>

            <!-- Item -->
            <div class="swiper-slide h-auto pb-3">
              <article class="card h-100 border-0 shadow-sm mx-2">
                <div class="position-relative">
                  <a href="#" class="position-absolute top-0 start-0 w-100 h-100" aria-label="Read more"></a>
                  <a href="#" class="btn btn-icon btn-light bg-white border-white btn-sm rounded-circle position-absolute top-0 end-0 zindex-5 me-3 mt-3" data-bs-toggle="tooltip" data-bs-placement="left" title="Read later">
                    <i class="bx bx-bookmark"></i>
                  </a>
                  <img src="assets/img/landing/financial/news/04.jpg" class="card-img-top" alt="Image">
                </div>
                <div class="card-body pb-4">
                  <div class="d-flex align-items-center justify-content-between mb-3">
                    <a href="#" class="badge fs-sm text-nav bg-secondary text-decoration-none">Ticks & Trips</a>
                    <span class="fs-sm text-muted">Oct 13, 2021</span>
                  </div>
                  <h3 class="h5 mb-0">
                    <a href="#">Stocks making the biggest moves after hours</a>
                  </h3>
                </div>
                <div class="card-footer py-4">
                  <a href="#" class="d-flex align-items-center text-decoration-none">
                    <img src="assets/img/avatar/41.jpg" class="rounded-circle" width="48" alt="Avatar">
                    <div class="ps-3">
                      <h6 class="fs-base fw-semibold mb-0">Jerome Bell</h6>
                      <span class="fs-sm text-muted">Business Analyst</span>
                    </div>
                  </a>
                </div>
              </article>
            </div>
          </div>

          <!-- Pagination (bullets) -->
          <div class="swiper-pagination position-relative bottom-0 mt-4 mb-lg-2"></div>
        </div>
      </div>
    </div>

## Link slides to outside content

### Cashless payment case study

Payment Service Provider Company

Aenean dolor elit tempus tellus imperdiet. Elementum, ac convallis morbi sit est feugiat ultrices. Cras tortor maecenas pulvinar nec ac justo. Massa sem eget semper...

View case study

### Smart tech case study

Data Analytics Company

Adipiscing quis a at ligula. Gravida gravida diam rhoncus cursus in. Turpis sagittis tempor gravida phasellus sapien. Faucibus donec consectetur sed id sit nisl.

View case study

    <!-- Link swiper slides to any content via swiper-tabs. Place outside of any container -->
    <div class="position-relative py-lg-4 py-xl-5">

      <!-- Swiper tabs -->
      <div class="swiper-tabs position-absolute top-0 start-0 w-100 h-100">
        <div id="image-1" class="position-absolute top-0 start-0 w-100 h-100 bg-position-center bg-repeat-0 bg-size-cover swiper-tab active" style="background-image: url(assets/img/landing/software-company/case-study01.jpg);">
          <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-35"></span>
        </div>
        <div id="image-2" class="position-absolute top-0 start-0 w-100 h-100 bg-position-center bg-repeat-0 bg-size-cover swiper-tab" style="background-image: url(assets/img/landing/software-company/case-study02.jpg);">
          <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-35"></span>
        </div>
      </div>

      <!-- Swiper slider -->
      <div class="container position-relative zindex-5 py-5">
        <div class="row py-2 py-md-3">
          <div class="col-xl-5 col-lg-7 col-md-9">

            <!-- Slider controls (Prev / next) -->
            <div class="d-flex justify-content-center justify-content-md-start pb-3 mb-3">
              <button type="button" id="case-study-prev" class="btn btn-prev btn-icon btn-sm bg-white me-2">
                <i class="bx bx-chevron-left"></i>
              </button>
              <button type="button" id="case-study-next" class="btn btn-next btn-icon btn-sm bg-white ms-2">
                <i class="bx bx-chevron-right"></i>
              </button>
            </div>

            <!-- Card -->
            <div class="card bg-white shadow-sm p-3">
              <div class="card-body">
                <div class="swiper" data-swiper-options='{
                  "spaceBetween": 30,
                  "loop": true,
                  "tabs": true,
                  "pagination": {
                    "el": "#case-study-pagination",
                    "clickable": true
                  },
                  "navigation": {
                    "prevEl": "#case-study-prev",
                    "nextEl": "#case-study-next"
                  }
                }'>
                  <div class="swiper-wrapper">

                    <!-- Item -->
                    <div class="swiper-slide" data-swiper-tab="#image-1">
                      <img src="assets/img/landing/software-company/case-study-logo01.png" class="d-block mb-3" width="72" alt="Logo">
                      <h3 class="mb-2">Cashless payment "udy</h3>
                      <p class="fs-sm text-muted border-bottom pb-3 mb-3">Payment Service Provider Company</p>
                      <p class="pb-2 pb-lg-3 mb-3">Aenean dolor elit tempus tellus imperdiet. Elementum, ac convallis morbi sit est feugiat ultrices. Cras tortor maecenas pulvinar nec ac justo. Massa sem eget semper...</p>
                      <a href="#" class="btn btn-primary">View "udy</a>
                    </div>

                    <!-- Item -->
                    <div class="swiper-slide" data-swiper-tab="#image-2">
                      <img src="assets/img/landing/software-company/case-study-logo02.png" class="d-block mb-3" width="72" alt="Logo">
                      <h3 class="mb-2">Smart tech "udy</h3>
                      <p class="fs-sm text-muted border-bottom pb-3 mb-3">Data Analytics Company</p>
                      <p class="pb-2 pb-lg-3 mb-3">Adipiscing quis a at ligula. Gravida gravida diam rhoncus cursus in. Turpis sagittis tempor gravida phasellus sapien. Faucibus donec consectetur sed id sit nisl.</p>
                      <a href="#" class="btn btn-primary">View "udy</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Pagination (bullets) -->
            <div class="dark-mode pt-4 mt-3">
              <div id="case-study-pagination" class="swiper-pagination position-relative bottom-0"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

## Fade transition

    <!-- Fade transition -->
    <div class="swiper swiper-nav-onhover" data-swiper-options='{
      "effect": "fade",
      "loop": true,
      "navigation": {
        "prevEl": ".btn-prev",
        "nextEl": ".btn-next"
      }
    }'>
      <div class="swiper-wrapper">

        <!-- Slide -->
        <div class="swiper-slide bg-light">
          <div class="ratio ratio-21x9 bg-faded-info">
            <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>

        <!-- Slide -->
        <div class="swiper-slide bg-light">
          <div class="ratio ratio-21x9 bg-faded-success">
            <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>

        <!-- Slide -->
        <div class="swiper-slide bg-light">
          <div class="ratio ratio-21x9 bg-faded-warning">
            <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 / next buttons -->
      <button type="button" class="btn btn-prev btn-icon btn-sm me-2">
        <i class="bx bx-chevron-left"></i>
      </button>
      <button type="button" class="btn btn-next btn-icon btn-sm ms-2">
        <i class="bx bx-chevron-right"></i>
      </button>
    </div>

Top