Vendor Plugin
Vendor : Flickity
Touch, responsive, flickable carousels.
- https://github.com/metafizzy/flickity
- License: GPLv3 & Commercial
Flickity license allow you to create a project for you (or for your customer).
Extract from flickity license agreement:
Customers and users of your products do not need to purchase their own license – so long as they are not developing their own commercial products with Flickity.
Because of end-user Flickity license restriction, Smarty occasionally used Flickity on Niche demos only.
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 cover it.
(the "license proof" is not included because... well, Flickity send us nothing special, just an email invoice. Plugin files are from their public Github!
/*
:: Vendor Path
node_modules/flickity/
:: Installed
npm install flickity
:: SOW Controller Init
*/ $.SOW.vendor.flickity.init('div[data-flickity]');
/*
Flickity does not require a Controller (has a self init).
But without it, must be added to main bundle, to always be
loaded, on each page! Moreover: rightToLeft (RTL) must be manually set in
carousel attributes for RTL pages.
.flickity-preloader = Preloader class added by Smarty
* identical preloader with swiper slider!
*/
Basic
<!--
Color Schemas
.flickity-white
.flickity-black
.flickity-dark
.flickity-primary
.flickity-danger
.flickity-success
.flickity-warning
.flickity-info
.flickity-pink
.flickity-indigo
.flickity-purple
-->
<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>
With Autoplay
<div class="flickity-preloader flickity-primary" data-flickity='{ "autoPlay": 3000, "pauseAutoPlayOnHover": 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>
Carousel
<div class="flickity-preloader flickity-pink 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>
Content Carousel
About Us
We launched Smarty few years ago and more than 7000 people are using it. Thank you for support!
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...
Smarty Reborn
Smarty was written from scratch, including 20+ most used plugins - lightweight, fast and scalable!
New Project
We are proud to work on this new project! A lot of challenges to solve, we love it!
<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 pt-4 pb-5">
<div class="card b-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--n50 mb--20" 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 font-weight-light mt--60">
<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 b-0">
<hr class="border-secondary opacity-2">
<span class="float-end fs--14 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 pt-4 pb-5">
<div class="card b-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--n50 mb--20" 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 font-weight-light mt--60">
<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 b-0">
<hr class="border-secondary opacity-2">
<span class="float-end fs--14 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 pt-4 pb-5">
<div class="card b-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--n50 mb--20" 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 font-weight-light mt--60">
<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 b-0">
<hr class="border-secondary opacity-2">
<span class="float-end fs--14 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 pt-4 pb-5">
<div class="card b-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--n50 mb--20" 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 font-weight-light mt--60">
<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 b-0">
<hr class="border-secondary opacity-2">
<span class="float-end fs--14 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>