Vendor : Flickity Slider

Touch, responsive, flickable carousels.

License: GPLv3 & Commercial
https://github.com/metafizzy/flickity
src/js/vendors/vendor.flickity.js

If you own a Smarty Extended License, use Swiper or purchase a Flickity Commercial License.
If you own a Smarty Single License, you can safely use Flickity because Smarty own a Flickity License that covers it.
(the "license proof" is not included because Flickity send us nothing special, just an email invoice. Plugin files are free, in their public Github)

Autoplay disabled

Autoplay enabled

                  
                    <!--
                      Button colors
                      .flickity-white (default)
                      .flickity-black
                      .flickity-dark
                      .flickity-primary
                      .flickity-danger
                      .flickity-success
                      .flickity-warning
                      .flickity-info

                      Autoplay
                      "autoPlay": false   (disabled)
                      "autoPlay": 3000    (3000 = 3s)
                    -->
                    <div class="flickity-preloader flickity-white" data-flickity='{ "autoPlay": false }'>
                      <img class="img-fluid" src="demo.files/images/unsplash/studio-republic-qeij_dhDhGg-unsplash.jpg" alt="...">
                      <img class="img-fluid" src="demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" alt="...">
                    </div>

Flickity Carousel

Preview
HTML

                  
                    <!--
                      Button colors
                      .flickity-white (default)
                      .flickity-black
                      .flickity-dark
                      .flickity-primary
                      .flickity-danger
                      .flickity-success
                      .flickity-warning
                      .flickity-info

                      Autoplay
                      "autoPlay": false   (disabled)
                      "autoPlay": 3000    (3000 = 3s)
                    -->
                    <div class="flickity-preloader flickity-white flickity-dot-line" data-flickity='{ "autoPlay": false, "cellAlign": "left", "wrapAround": true }'>

                      <div class="col-12 col-md-4 px-1">
                        <img src="demo.files/images/unsplash/covers/room-iFIht7bf-Cs-unsplash.jpg" class="img-fluid" alt="...">
                      </div>
                      <div class="col-12 col-md-4 px-1">
                        <img src="demo.files/images/unsplash/covers/room-7DzpP1IVo8Y-unsplash.jpg" class="img-fluid" alt="...">
                      </div>
                      <div class="col-12 col-md-4 px-1">
                        <img src="demo.files/images/unsplash/covers/room-_A_UV188rqk-unsplash.jpg" class="img-fluid" alt="...">
                      </div>
                      <div class="col-12 col-md-4 px-1">
                        <img src="demo.files/images/unsplash/covers/room-7TOLFyu1Dp4-unsplash.jpg" class="img-fluid" alt="...">
                      </div>

                    </div>

Flickity Content example

Preview
HTML

About Us

We launched Smarty few years ago and more than 7000 people are using it. Thank you for support!

29 June, 2019 Read More

We are hiring

Great news, we are expanding our team! If developing is your real passion and you want to be part of our team...

3 jobs Join now

Smarty Reborn

Smarty was written from scratch, including 20+ most used plugins - lightweight, fast and scalable!

Smarty Reborn Get Smarty

New Project

We are proud to work on this new project! A lot of challenges to solve, we love it!

domain.com Visit Project

                  
                    <div class="flickity-preloader" data-flickity='{ "autoPlay": false, "cellAlign": "left", "pageDots": false, "prevNextButtons": false, "contain": true, "rightToLeft": false }'>

                      <div class="col-12 col-lg-4 mb-4 py-4 me-4">

                        <div class="card border-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

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

                            <!-- bottom waves -->
                            <div class="h--1">
                              <svg class="mt-n5 mb-3" width="100%" height="50px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
                                <path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
                                <path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
                                <path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
                              </svg>
                            </div>

                          </div>

                          <!-- lines, looks like through a glass -->
                          <div class="position-absolute absolute-full w-100 overflow-hidden">
                            <img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
                          </div>

                          <div class="card-body fw-light mt-5">

                            <div class="d-table">
                              <div class="d-table-cell align-bottom">

                                <h2 class="h5 card-title mb-4">
                                  About Us
                                </h2>

                                <p class="lead h--90 overflow-hidden">
                                  We launched Smarty few years ago and more than 7000 people are using it. Thank you for support!
                                </p>

                              </div>
                            </div>

                          </div>

                          <div class="card-footer bg-transparent border-0">
                            <hr class="border-secondary opacity-2">

                            <span class="float-end fs-6 text-gray-500 p-2">
                              29 June, 2019
                            </span>

                            <a href="#" class="btn btn-sm btn-primary btn-soft opacity-6">
                              Read More
                            </a>
                          </div>

                        </div>

                      </div>

                      <div class="col-12 col-lg-4 mb-4 py-4 me-4">

                        <div class="card border-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

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

                            <!-- bottom waves -->
                            <div class="h--1">
                              <svg class="mt-n5 mb-3" width="100%" height="50px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
                                <path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
                                <path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
                                <path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
                              </svg>
                            </div>

                          </div>

                          <!-- lines, looks like through a glass -->
                          <div class="position-absolute absolute-full w-100 overflow-hidden">
                            <img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
                          </div>

                          <div class="card-body fw-light mt-5">

                            <div class="d-table">
                              <div class="d-table-cell align-bottom">

                                <h2 class="h5 card-title mb-4">
                                  We are hiring
                                </h2>

                                <p class="lead h--90 overflow-hidden">
                                  Great news, we are expanding our team! If developing is your real passion and you want to be part of our team...
                                </p>

                              </div>
                            </div>

                          </div>

                          <div class="card-footer bg-transparent border-0">
                            <hr class="border-secondary opacity-2">

                            <span class="float-end fs-6 text-gray-500 p-2">
                              3 jobs
                            </span>

                            <a href="#" class="btn btn-sm btn-success btn-soft opacity-6">
                              Join now
                            </a>
                          </div>

                        </div>

                      </div>


                      <div class="col-12 col-lg-4 mb-4 py-4 me-4">

                        <div class="card border-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

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

                            <!-- bottom waves -->
                            <div class="h--1">
                              <svg class="mt-n5 mb-3" width="100%" height="50px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
                                <path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
                                <path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
                                <path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
                              </svg>
                            </div>

                          </div>

                          <!-- lines, looks like through a glass -->
                          <div class="position-absolute absolute-full w-100 overflow-hidden">
                            <img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
                          </div>

                          <div class="card-body fw-light mt-5">

                            <div class="d-table">
                              <div class="d-table-cell align-bottom">

                                <h2 class="h5 card-title mb-4">
                                  Smarty Reborn
                                </h2>

                                <p class="lead h--90 overflow-hidden">
                                  Smarty was written from scratch, including 20+ most used plugins - lightweight, fast and scalable!
                                </p>

                              </div>
                            </div>

                          </div>

                          <div class="card-footer bg-transparent border-0">
                            <hr class="border-secondary opacity-2">

                            <span class="float-end fs-6 text-gray-500 p-2">
                              Smarty Reborn
                            </span>

                            <a href="https://wrapbootstrap.com/theme/smarty-website-admin-rtl-WB02DSN1B" class="btn btn-sm btn-indigo btn-soft opacity-6">
                              Get Smarty
                            </a>
                          </div>

                        </div>

                      </div>


                      <div class="col-12 col-lg-4 mb-4 py-4 me-4">

                        <div class="card border-0 shadow-md shadow-lg-hover transition-all-ease-250 transition-hover-top h-100">

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

                            <!-- bottom waves -->
                            <div class="h--1">
                              <svg class="mt-n5 mb-3" width="100%" height="50px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
                                <path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
                                <path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
                                <path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
                              </svg>
                            </div>

                          </div>

                          <!-- lines, looks like through a glass -->
                          <div class="position-absolute absolute-full w-100 overflow-hidden">
                            <img class="img-fluid" width="2000" height="2000" src="../assets/images/masks/shape-line-lense.svg" alt="...">
                          </div>

                          <div class="card-body fw-light mt-5">

                            <div class="d-table">
                              <div class="d-table-cell align-bottom">

                                <h2 class="h5 card-title mb-4">
                                  New Project
                                </h2>

                                <p class="lead h--90 overflow-hidden">
                                  We are proud to work on this new project! A lot of challenges to solve, we love it!
                                </p>

                              </div>
                            </div>

                          </div>

                          <div class="card-footer bg-transparent border-0">
                            <hr class="border-secondary opacity-2">

                            <span class="float-end fs-6 text-gray-500 p-2">
                              domain.com
                            </span>

                            <a href="#" class="btn btn-sm btn-pink btn-soft opacity-6">
                              Visit Project
                            </a>
                          </div>

                        </div>

                      </div>

                    </div>