Bootstrap Swiper

The Bootstrap swiper is a slider component and along with other great components, is a part of Framework7 - a fully-featured framework for building iOS & Android apps. Swiper is also a default slider component in the Ionic Framework.

Usage

In order to use swiper your page you will need to include the following script in the “Optional JS” area from the page’s footer:

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

After that, simply copy one of the code examples demonstrated below and include it in your page.

Example

#1

Name

Secured

Category

Banking

#2

Name

Cyber

Category

Security

#3

Name

Alpha

Category

Blockchain

#4

Name

Beta

Category

Web3

#5

Name

Gama

Category

Design

#6

Name

Rompro

Category

Security
<div class="position-relative overflow-hidden">
  <div class="swiper mySwiper mt-4 mb-2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div>
          <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
            <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-2.jpg')"></div>
            <div class="card-body text-start px-3 py-0 w-100">
              <div class="row mt-12">
                <div class="col-sm-3 mt-auto">
                  <h4 class="text-dark font-weight-bolder no_toc">#1</h4>
                  <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                  <h5 class="text-dark font-weight-bolder no_toc">Secured</h5>
                </div>
                <div class="col-sm-3 ms-auto mt-auto">
                  <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                  <h5 class="text-dark font-weight-bolder no_toc">Banking</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
          <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-1.jpg')"></div>
          <div class="card-body text-start px-3 py-0 w-100">
            <div class="row mt-12">
              <div class="col-sm-3 mt-auto">
                <h4 class="text-dark font-weight-bolder no_toc">#2</h4>
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                <h5 class="text-dark font-weight-bolder no_toc">Cyber</h5>
              </div>
              <div class="col-sm-3 ms-auto mt-auto">
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                <h5 class="text-dark font-weight-bolder no_toc">Security</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
          <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-3.jpg')"></div>
          <div class="card-body text-start px-3 py-0 w-100">
            <div class="row mt-12">
              <div class="col-sm-3 mt-auto">
                <h4 class="text-dark font-weight-bolder no_toc">#3</h4>
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                <h5 class="text-dark font-weight-bolder no_toc">Alpha</h5>
              </div>
              <div class="col-sm-3 ms-auto mt-auto">
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                <h5 class="text-dark font-weight-bolder no_toc">Blockchain</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
          <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-4.jpg')"></div>
          <div class="card-body text-start px-3 py-0 w-100">
            <div class="row mt-12">
              <div class="col-sm-3 mt-auto">
                <h4 class="text-dark font-weight-bolder no_toc">#4</h4>
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                <h5 class="text-dark font-weight-bolder no_toc">Beta</h5>
              </div>
              <div class="col-sm-3 ms-auto mt-auto">
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                <h5 class="text-dark font-weight-bolder no_toc">Web3</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
          <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-5.jpg')"></div>
          <div class="card-body text-start px-3 py-0 w-100">
            <div class="row mt-12">
              <div class="col-sm-3 mt-auto">
                <h4 class="text-dark font-weight-bolder no_toc">#5</h4>
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                <h5 class="text-dark font-weight-bolder no_toc">Gama</h5>
              </div>
              <div class="col-sm-3 ms-auto mt-auto">
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                <h5 class="text-dark font-weight-bolder no_toc">Design</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="card card-background shadow-none border-radius-xl card-background-after-none align-items-start mb-0">
          <div class="full-background bg-cover" style="background-image: url('https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/img-1.jpg')"></div>
          <div class="card-body text-start px-3 py-0 w-100">
            <div class="row mt-12">
              <div class="col-sm-3 mt-auto">
                <h4 class="text-dark font-weight-bolder no_toc">#6</h4>
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Name</p>
                <h5 class="text-dark font-weight-bolder no_toc">Rompro</h5>
              </div>
              <div class="col-sm-3 ms-auto mt-auto">
                <p class="text-dark opacity-6 text-xs font-weight-bolder mb-0">Category</p>
                <h5 class="text-dark font-weight-bolder no_toc">Security</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
<script>

var swiper = new Swiper(".mySwiper", {
  effect: "cards",
  grabCursor: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

</script>