<!--

                      Color Schemas
                      .swiper-white (default)
                      .swiper-black
                      .swiper-dark
                      .swiper-primary
                      .swiper-danger
                      .swiper-success
                      .swiper-warning
                      .swiper-info
                      .swiper-pink
                      .swiper-indigo
                      .swiper-purple

                      Autoplay
                      "autoplay": false
                      "autoplay": { "delay" : 1500, "disableOnInteraction": false }

                    -->
                    <div class="swiper-container swiper-white swiper-preloader" 
                      data-swiper='{
                        "autoplay": { "delay" : 1500, "disableOnInteraction": false }
                      }'>
                      <div class="swiper-wrapper">

                        <div class="swiper-slide">
                          <img class="img-fluid" src="../demo.files/images/unsplash/studio-republic-qeij_dhDhGg-unsplash.jpg" alt="...">
                        </div>

                        <div class="swiper-slide">
                          <img class="img-fluid" src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" alt="...">
                        </div>

                      </div>

                      <!-- Navs -->
                      <div class="bg-white rounded-circle swiper-button-next"></div>
                      <div class="bg-white rounded-circle swiper-button-prev"></div>

                    </div>
                  
                

                  
                    <div class="swiper-container swiper-preloader swiper-btn-group swiper-btn-group-end text-white" 
                      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 bg-white overlay-dark overlay-opacity-3 bg-cover" style="background:url('../demo.files/images/unsplash/covers/room-7TOLFyu1Dp4-unsplash.jpg')">
                          <div class="w-100 text-center">
                            <h1 class="m-0" data-swiper-parallax="-300">Smarty</h1>
                            <h2 class="m-0" data-swiper-parallax="-400">Multipurpose</h2>
                          </div>
                        </div>

                        <div class="swiper-slide h-100 d-middle bg-white overlay-dark overlay-opacity-3 bg-cover" style="background:url('../demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg')">
                          <div class="w-100 text-center">
                            <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>
                  
                

                  
                    <div class="swiper-container swiper-preloader swiper-primary swiper-btn-group swiper-btn-group-end text-white" 
                      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-3 bg-white bg-cover" style="background:url('../demo.files/images/unsplash/covers/room-7TOLFyu1Dp4-unsplash.jpg')">
                          <div class="w-100 text-center">
                            <h1 class="m-0" data-swiper-parallax="-300">Smarty</h1>
                            <h2 class="m-0" data-swiper-parallax="-400">Reborn</h2>
                          </div>
                        </div>

                        <div class="swiper-slide h-100 d-middle overlay-dark overlay-opacity-3 bg-white bg-cover" style="background:url('../demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg')">
                          <div class="w-100 text-center">
                            <h1 class="m-0" data-swiper-parallax="-300">Smarty</h1>
                            <h2 class="m-0" data-swiper-parallax="-400">V3</h2>
                          </div>
                        </div>

                      </div>

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

                      <!-- .position-relative = progressbar is on bottom -->
                      <div class="swiper-pagination position-relative" style="height:3px"></div>

                    </div>
                  
                

                  
                    <!--

                      Color Schemas
                      .swiper-white (default)
                      .swiper-black
                      .swiper-dark
                      .swiper-primary
                      .swiper-danger
                      .swiper-success
                      .swiper-warning
                      .swiper-info
                      .swiper-pink
                      .swiper-indigo
                      .swiper-purple

                      Autoplay
                      "autoplay": false
                      "autoplay": { "delay" : 1500, "disableOnInteraction": false }

                    -->
                    <div class="swiper-container swiper-white" data-swiper='{
                        "slidesPerView": 3,
                        "spaceBetween": 8,
                        "slidesPerGroup": 1,
                        "loop": true,
                        "autoplay": { "delay" : 1500, "disableOnInteraction": false },
                        "breakpoints": {
                          "1024": { "slidesPerView": "3" },
                          "920":  { "slidesPerView": "2" },
                          "640":  { "slidesPerView": "1" }
                        }
                      }'>

                      <div class="hide swiper-wrapper">

                        <div class="swiper-slide">
                          <img src="../demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg" class="img-fluid" alt="...">
                        </div>

                        <div class="swiper-slide">
                          <img src="../demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" class="img-fluid" alt="...">
                        </div>

                        <div class="wiper-slide">
                          <img src="../demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg" class="img-fluid" alt="...">
                        </div>

                        <div class="swiper-slide">
                          <img src="../demo.files/images/unsplash/covers/room-7TOLFyu1Dp4-unsplash.jpg" class="img-fluid" alt="...">
                        </div>

                      </div>

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