AdminUIUX

Learning

Please wait...
Let's learn and together we grow

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

Learn more about swiper js 

            <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>
SmartWizard
Avatar