Swiper Slider

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.
It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

License: MIT
https://github.com/nolimits4web/swiper

Swiper Basic

No Autoplay

With Autoplay

                
                  <div class="swiper-container" data-swiper='{"autoplay":false}'>
                    <div class="swiper-wrapper">

                      <div class="swiper-slide">
                        <img class="img-fluid" src="../demo.files/images/unsplash/icons8-team-7LNatQYMzm4-unsplash.jpg" alt="...">
                      </div>

                      <div class="swiper-slide">
                        <img class="img-fluid" src="../demo.files/images/unsplash/icons8-team-dhZtNlvNE8M-unsplash.jpg" alt="...">
                      </div>

                    </div>
                  </div>

                
                  <!-- Vendor : Swiper -->
                  <link rel="stylesheet" href="../assets/vendors/swiper/swiper-bundle.min.css">

                
                  <!-- Vendor : Swiper -->
                  <script src="../assets/vendors/swiper/swiper-bundle.min.js"></script>
                  <script src="../assets/vendors/vendor.swiper.min.js"></script>

Bullets

Progress

Bottom Bar

Lorem

Ipsum

Progress Bar

Progress

Bottom Bar

Lorem

Ipsum

                
                  <!-- Bullets -->
                  <div class="swiper-container" 
                        data-swiper='{
                          "slidesPerView": 1,
                          "spaceBetween": 0,
                          "autoplay": false,
                          "loop": true,
                          "pagination": { "type": "bullets" }
                        }'>
                    <div class="swiper-wrapper" style="height:400px">

                      <div class="swiper-slide h-100 d-middle overlay-dark overlay-opacity-25 bg-cover" style="background-image:url(../demo.files/images/unsplash/icons8-team-7LNatQYMzm4-unsplash.jpg)">
                        <div class="w-100 text-center text-white">
                          <h1 class="m-0" data-swiper-parallax="-300">Progress</h1>
                          <h2 class="m-0" data-swiper-parallax="-400">Bottom Bar</h2>
                        </div>
                      </div>

                      <div class="swiper-slide h-100 d-middle overlay-dark overlay-opacity-25 bg-cover" style="background-image:url(../demo.files/images/unsplash/icons8-team-dhZtNlvNE8M-unsplash.jpg)">
                        <div class="w-100 text-center text-white">
                          <h1 class="m-0" data-swiper-parallax="-300">Lorem</h1>
                          <h2 class="m-0" data-swiper-parallax="-400">Ipsum</h2>
                        </div>
                      </div>

                    </div>

                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>

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

                  </div>

                
                  <!-- Progress -->
                  <div class="swiper-container" 
                        data-swiper='{
                          "slidesPerView": 1,
                          "spaceBetween": 0,
                          "autoplay": false,
                          "loop": true,
                          "pagination": { "type": "progressbar" }
                        }'>
                    <div class="swiper-wrapper" style="height:400px">

                      <div class="swiper-slide h-100 d-middle overlay-dark overlay-opacity-25 bg-cover" style="background-image:url(../demo.files/images/unsplash/icons8-team-7LNatQYMzm4-unsplash.jpg)">
                        <div class="w-100 text-center text-white">
                          <h1 class="m-0" data-swiper-parallax="-300">Progress</h1>
                          <h2 class="m-0" data-swiper-parallax="-400">Bottom Bar</h2>
                        </div>
                      </div>

                      <div class="swiper-slide h-100 d-middle overlay-dark overlay-opacity-25 bg-cover" style="background-image:url(../demo.files/images/unsplash/icons8-team-dhZtNlvNE8M-unsplash.jpg)">
                        <div class="w-100 text-center text-white">
                          <h1 class="m-0" data-swiper-parallax="-300">Lorem</h1>
                          <h2 class="m-0" data-swiper-parallax="-400">Ipsum</h2>
                        </div>
                      </div>

                    </div>

                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>

                     <!-- Add Progress -->
                    <div class="swiper-pagination position-relative" style="height:3px"></div>

                  </div>