Vendor Plugin
Vendor : Swiper
Most modern mobile touch slider with hardware accelerated transitions.
Because Flickity can be used on Smarty Single License only (and old wrapbootstrap Multiple License), we added Swiper to also cover Smarty Extended License.
Swiper is used as a default slider, in our humble opinion is the best one. And is free under MIT license!
You can choose between Swiper and Flickty. Disable what you don't use in gulp.config__vendors.js
- https://github.com/nolimits4web/swiper
- License: MIT
/*
:: Vendor Path
node_modules/swiper/
:: Installed
npm install swiper
:: SOW Controller Init
*/ $.SOW.vendor.swiper.init('.swiper-container');
/*
:: Plugin Options|Defaults
*/ $.SOW.vendor.swiper.init('.swiper-container', {
direction : 'horizontal', // horizontal, vertical
spaceBetween : 15,
slidesPerView : 1, // number, 'auto'
slidesPerGroup : 1,
slidesPerColumn : 1,
centeredSlides : false,
effect : 'fade', // slide, fade, flip, cubeEffect, coverflowEffect
grabCursor : false,
freeMode : false, // scroll free, don't stop to next one
loop : false,
autoHeight : false,
mousewheel : false,
speed : 600,
parallax : false,
lazy : false,
zoom : false,
autoplay : {
delay : 4500,
disableOnInteraction : false,
},
pagination: {
el : '.swiper-pagination',
type : 'bullets', // bullets, progressbar, fraction, custom
dynamicBullets : true,
clickable : true
}
})
Basic
<!--
Note: .swiper-preloader class is not part of swiper vendor,
is optional, recommended but is also considered a `fix class`
cecause is trying to fix some loading issues like
"jump" effect on many images!
src/scss/layout/fix.scss
-->
<div class="swiper-container"
data-swiper='{
"autoplay": false
}'>
<div class="swiper-wrapper swiper-preloader">
<div class="swiper-slide d-middle bg-white">
<img class="img-fluid" src="demo.files/images/unsplash/studio-republic-qeij_dhDhGg-unsplash.jpg" alt="...">
</div>
<div class="swiper-slide d-middle bg-white">
<img class="img-fluid" src="demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" alt="...">
</div>
</div>
</div>
Styling
<!--
Color Schemas
.swiper-white
.swiper-black
.swiper-dark
.swiper-primary
.swiper-danger
.swiper-success
.swiper-warning
.swiper-info
.swiper-pink
.swiper-indigo
.swiper-purple
-->
<div class="swiper-container swiper-preloader swiper-white">
<div class="swiper-wrapper">
<div class="swiper-slide d-middle bg-white">
<img class="img-fluid" src="demo.files/images/unsplash/studio-republic-qeij_dhDhGg-unsplash.jpg" alt="...">
</div>
<div class="swiper-slide d-middle bg-white">
<img class="img-fluid" src="demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash.jpg" alt="...">
</div>
</div>
<!-- Add Arrows -->
<div class="rounded-circle swiper-button-next"></div>
<div class="rounded-circle swiper-button-prev"></div>
</div>
Bullets
<div class="swiper-container swiper-preloader swiper-white text-white"
data-swiper='{
"spaceBetween": 0,
"slidesPerView": 1,
"loop": true,
"autoplay": false,
"pagination": { "el":".swiper-pagination", "type": "bullets" }
}'>
<div class="swiper-wrapper h--400">
<div class="swiper-slide h-100 d-middle bg-white overlay-dark overlay-opacity-5 d-middle bg-cover" style="background:url('demo.files/images/unsplash/studio-republic-qeij_dhDhGg-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 bg-white overlay-dark overlay-opacity-5 d-middle bg-cover" style="background:url('demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-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="rounded-circle swiper-button-next"></div>
<div class="rounded-circle swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Custom Pagination
<!--
.swiper-btn-group.swiper-btn-group-start
.swiper-btn-group.swiper-btn-group-end
-->
<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 h--400">
<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">Reborn</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">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>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
Progress Bar
<div class="swiper-container swiper-preloader swiper-danger 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 h--400">
<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>
<!--
Add Pagination :: Used as Progressbar
if .position-relative class used,
progressbar is on bottom!
-->
<div class="swiper-pagination h--3 position-relative"></div>
</div>
Carousel
<div class="swiper-container swiper-pink" 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="swiper-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>
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="swiper-container swiper-pink p--30" data-swiper='{
"slidesPerView": 3,
"spaceBetween": 30,
"slidesPerGroup": 1,
"loop": false,
"autoplay": false
}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<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="swiper-slide">
<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="swiper-slide">
<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="swiper-slide">
<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>
</div>