Sliding Boxes
View Example's Code
<div class="bg-gray py-4">
<div class="swiper sliding-boxes">
<div class="swiper-wrapper">
<!-- Item 1 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor</p>
<h4 class="mt-4 mb-1">Christina Gray</h4>
<span class="sm-heading text-dark-50">Creative Director</span>
</div>
</div>
<!-- Item 2 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
<h4 class="mt-4 mb-1">Brian Cabrera</h4>
<span class="sm-heading text-dark-50">COO - Company</span>
</div>
</div>
<!-- Item 3 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor</p>
<h4 class="mt-4 mb-1">William Davis</h4>
<span class="sm-heading text-dark-50">Manager - Company</span>
</div>
</div>
<!-- Item 4 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
<h4 class="mt-4 mb-1">Rita Cowan</h4>
<span class="sm-heading text-dark-50">CMO - Company</span>
</div>
</div>
<!-- Item 5 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor</p>
<h4 class="mt-4 mb-1">Janice Fortner</h4>
<span class="sm-heading text-dark-50">Project Manager</span>
</div>
</div>
<!-- Item 6 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4 p-lg-5">
<div class="mb-3">
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
<i class="bi bi-star-fill text-yellow"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
<h4 class="mt-4 mb-1">Barbara Myers</h4>
<span class="sm-heading text-dark-50">CTO - Company</span>
</div>
</div>
<!-- end Item 6 -->
</div><!-- end swiper-wrapper -->
</div><!-- end swiper -->
</div>
Sliding Boxes
View Example's Code
<div class="bg-gray py-4">
<div class="swiper sliding-boxes">
<div class="swiper-wrapper text-center">
<!-- Item 1 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 1</h3>
</div>
</div>
<!-- Item 2 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 2</h3>
</div>
</div>
<!-- Item 3 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 3</h3>
</div>
</div>
<!-- Item 4 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 4</h3>
</div>
</div>
<!-- Item 5 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 5</h3>
</div>
</div>
<!-- Item 6 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 6</h3>
</div>
</div>
<!-- Item 7 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 7</h3>
</div>
</div>
<!-- Item 8 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 8</h3>
</div>
</div>
<!-- Item 9 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 9</h3>
</div>
</div>
<!-- Item 10 -->
<div class="swiper-slide">
<div class="bg-white border-radius p-4">
<h3>Sliding box title 10</h3>
</div>
</div>
<!-- end Item 10 -->
</div><!-- end swiper-wrapper -->
</div><!-- end swiper -->
</div>