Swiper Carousel
Swiper Carousel Auto width
Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps.
80 bpm
HeartBeat
30.7° C
Temperature
98 %
O2 Oxygen
80 bpm
HeartBeat
30.7° C
Temperature
98 %
O2 Oxygen
80 bpm
HeartBeat
30.7° C
Temperature
98 %
O2 Oxygen
<div class="swiper swipernav mb-3">
<div class="swiper-wrapper">
<div class="swiper-slide width-140">
<div class="card border">
<div class="card-body">
<div class="avatar avatar-40 bg-danger-subtle text-danger-emphasis rounded mb-3">
<i class="bi bi-heart-pulse fs-4"></i>
</div>
<p class="h4 mb-0">80 <small class="opacity-50 h6 fw-normal">bpm</small>
</p>
<p class="opacity-50">HeartBeat</p>
</div>
</div>
</div>
<div class="swiper-slide width-140">
<div class="card border">
<div class="card-body">
<div class="avatar avatar-40 bg-warning-subtle text-warning-emphasis rounded mb-3">
<i class="bi bi-thermometer-half fs-4"></i>
</div>
<p class="h4 mb-0">30.7<sup>°</sup> <small class="opacity-50 h6 fw-normal">C</small>
</p>
<p class="opacity-50">Temperature</p>
</div>
</div>
</div>
<div class="swiper-slide width-140">
<div class="card border">
<div class="card-body">
<div class="avatar avatar-40 bg-info-subtle text-info-emphasis rounded mb-3">
<i class="bi bi-droplet-half fs-4"></i>
</div>
<p class="h4 mb-0">98 <small class="opacity-50 h6 fw-normal">%</small>
</p>
<p class="opacity-50">O<sub>2</sub> Oxygen</p>
</div>
</div>
</div>
</div>
</div>
<script>
"use strict";
$(document).ready(function () {
swipernav()
});
</script>