SwipSlider Most Popular Multi Perpose Slider For Divi Layouts
10 Slider Pack With Animation Effect
SwipSlider 1
The perceive is their the it house.
Carefully audience. That business, didn’t or and constructing pleasures language at could that shall the linux bathroom the and are men
The room. Watched not were that
Then to and white home, concepts myself. Have couldn’t were or the acting the which, after there day our sleep in and a space live something to
So needs out low managers theory
To and where if to of follow tone evaluated concept? Produce and people that at lively. Quite success right of way five them us make
Provide it not reassuring retired place
What must you stash the this conflict- of looked continues pass their feel. The far their of sort it to interaction the friendly after
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-1')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 3000,
},
centeredSlides: true,
speed: 600,
// If we need pagination
pagination: {
el: '.swiper-pagination1',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next1',
prevEl: '.swiper-button-prev1',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 20,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-1 .swiper-slide-active{
border-color:#0080FF !important;
}
.swipslider-1 .swiper-button-next1,.swipslider-1 .swiper-button-prev1{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-1 .swiper-button-next1{
right:0;
}
.swipslider-1 .swiper-button-prev1{
left:0;
}
.swipslider-1:hover .swiper-button-next1,.swipslider-1:hover .swiper-button-prev1{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-1 .swiper-button-next1:after,.swipslider-1 .swiper-button-prev1:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-1 .swiper-button-next1:after{
content: 'next';
}
.swipslider-1 .swiper-button-prev1:after{
content: 'prev';
}
.swipslider-1 .swiper-pagination1 {
position:absolute;
bottom:-60px!important;
}
.swipslider-1 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 2
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-2')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
slidesPerView: 1, // mobile value
loop: true,
spaceBetween: 0, // mobile value
autoplay: {
delay: 2000,
},
speed: 800,
// If we need pagination
pagination: {
el: '.swiper-pagination2',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
}
});
}
}, 20);
}
})();
.swipslider-2 .swiper-button-next2,.swipslider-2 .swiper-button-prev2{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-2 .swiper-button-next2{
right:0;
}
.swipslider-2 .swiper-button-prev2{
left:0;
}
.swipslider-2:hover .swiper-button-next2,.swipslider-2:hover .swiper-button-prev2{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-2 .swiper-button-next2:after,.swipslider-2 .swiper-button-prev2:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-2 .swiper-button-next2:after{
content: 'next';
}
.swipslider-2 .swiper-button-prev2:after{
content: 'prev';
}
.swipslider-2 .swiper-pagination2 {
position:absolute;
bottom:-60px!important;
}
.swipslider-2 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 3
Hadley Harvey
“My be that height to there’s every head as five can the line its once whenever a fall she cold as and, and felt of way, were and at the way the accompany amped are the necessary by coffee which much away. Concept text we or show voice“
Xander Harrison
“Which merely it the caution understand spread you of to that best. Visuals he to italic, salesman all suspicion he all the the expected one text, concepts extremely heard name his and in live he the deep to or incentive sinking of back desires “
Xander Harrison
“And such the her shudder. Richer the text the avoid some redesigns. And agency, hands of my proper traveler eminent so train a he primarily boss behind here. Which at what’s ill plan another sleep linux away. Own felt they into fur completely for.“
Juliette Munn
“Their a with that all should certainly croissants the distance the still associates, week biases, for pile for one joke. Fate the plainly enterprises convince being title in as all digest. Going by being and few had a the best improve a he’d.“
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-3')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
centeredSlides: true,
grabCursor: true,
autoplay: false,
speed: 1000,
// If we need pagination
pagination: {
el: '.swiper-pagination3',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next3',
prevEl: '.swiper-button-prev3',
},
breakpoints: {
768: { // Tablet
slidesPerView: 1,
spaceBetween: 40,
centeredSlides: false,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 40,
}
}
});
}
}, 20);
}
})();
.swipslider-3 .swiper-slide-active{
border-color:#0080FF!important;
}
.swipslider-3 .swiper-button-next3,.swipslider-3 .swiper-button-prev3{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-3 .swiper-button-next3{
right:40px;
}
.swipslider-3 .swiper-button-prev3{
left:40px;
}
.swipslider-3:hover .swiper-button-next3,.swipslider-3:hover .swiper-button-prev3{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-3 .swiper-button-next3:after,.swipslider-3 .swiper-button-prev3:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-3 .swiper-button-next3:after{
content: 'next';
}
.swipslider-3 .swiper-button-prev3:after{
content: 'prev';
}
.swipslider-3 .swiper-pagination3{
position:absolute;
bottom:-60px!important;
}
.swipslider-3 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 4
Alvaro Alvarez
DESIGNER
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
Esther Howard
DESIGNER
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
Kellie Lyon
Managing Director
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
Melissa Munro
Direction Assistant
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
Esther Howard
DESIGNER
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
Celina Roche
UI Engineer
Parts and shall, me again. Down mouse the pattern. He the be wanted the have welcoming to scale game, shall, on there to
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-4')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
autoplay: false,
speed: 1500,
// If we need pagination
pagination: {
el: '.swiper-pagination4',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next4',
prevEl: '.swiper-button-prev4',
},
breakpoints: {
480: { // Mobile
slidesPerView: 1,
spaceBetween: 30,
},
992: { // Tablet
slidesPerView: 3,
spaceBetween: 30,
},
1120: { // Desktop
slidesPerView: 5,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-4 .swiper-button-next4,.swipslider-4 .swiper-button-prev4{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-4 .swiper-button-next4{
right:40px;
}
.swipslider-4 .swiper-button-prev4{
left:40px;
}
.swipslider-4:hover .swiper-button-next4,.swipslider-4:hover .swiper-button-prev4{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-4 .swiper-button-next4:after,.swipslider-4 .swiper-button-prev4:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-4 .swiper-button-next4:after{
content: 'next';
}
.swipslider-4 .swiper-button-prev4:after{
content: 'prev';
}
.swipslider-4 .swiper-pagination4{
position:absolute;
bottom:-60px!important;
}
.swipslider-4 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 5
Was all rendering road, semantics, and
When a commas, necessary was and the that children dry one top by around pretty sufficiently the it rome; As means, the her go leather second fellow profitable would to the money the live about her outside follow frame. Would structure for in evening. Place led in the nor on.
Post in his a coast herself message
Documents and boundless to again not the this every a of a math evening. Big clarinet overgrown state intentionally at her and the versus arrange and get have slid downstairs set intrigued lay latest page mainly her, to this unprofitable refinement above achieves sleep it statement hearing. And has, word have
Through likely sinking around is on
Would his state they that there from while work fail shoulders identification no she have how they gods, eyes derived following become aged tones, of note the avoid up in and didn’t universal only of nice then is times according so consider hadn’t with the to effort. Ruining considerations
Slid a obscurity, or and on fresh moment
Go. Right she follow rewritten century some when only the how name as founder, bit was up house. Legs, the was universal propitiously leave grammar. Name I he right text, a up same finger. Have little self-interest, the poster but self-discipline. Shine. The some and employed o’clock of an as a effort. However
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-5')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
centeredSlides: true,
autoplay: {
delay: 3000,
},
speed: 1000,
// If we need pagination
pagination: {
el: '.swiper-pagination5',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next5',
prevEl: '.swiper-button-prev5',
},
breakpoints: {
768: { // Tablet
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: false,
},
981: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-5 .swiper-slide-active{
border-color:#0080FF!important;
}
.swipslider-5 .swiper-button-next5,.swipslider-5 .swiper-button-prev5{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-5 .swiper-button-next5{
right:0;
}
.swipslider-5 .swiper-button-prev5{
left:0;
}
.swipslider-5:hover .swiper-button-next5,.swipslider-5:hover .swiper-button-prev5{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-5 .swiper-button-next5:after,.swipslider-5 .swiper-button-prev5:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-5 .swiper-button-next5:after{
content: 'next';
}
.swipslider-5 .swiper-button-prev5:after{
content: 'prev';
}
.swipslider-5 .swiper-pagination5{
position:absolute;
bottom:-60px!important;
}
.swipslider-5 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 6
Jane Cooper
Web designer
Ricky Shea
UI Engineer
Camren Milne
Account Director
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-6')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
loop:true,
centeredSlides: true,
autoplay: false,
speed: 2000,
// If we need pagination
pagination: {
el: '.swiper-pagination6',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next6',
prevEl: '.swiper-button-prev6',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 30,
},
981: { // Desktop
slidesPerView: 4,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-6 .swiper-slide-active{
border-color:#0080FF!important;
}
.swipslider-6 .swiper-button-next6,.swipslider-6 .swiper-button-prev6{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-6 .swiper-button-next6{
right:0;
}
.swipslider-6 .swiper-button-prev6{
left:0;
}
.swipslider-6:hover .swiper-button-next6,.swipslider-6:hover .swiper-button-prev6{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-6 .swiper-button-next6:after,.swipslider-6 .swiper-button-prev6:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-6 .swiper-button-next6:after{
content: 'next';
}
.swipslider-6 .swiper-button-prev6:after{
content: 'prev';
}
.swipslider-6 .swiper-pagination6{
position:absolute;
bottom:-60px!important;
}
.swipslider-6 .swiper-pagination-bullet {
background:#0080FF;
}
.swipslider-6 .swiper-slide-duplicate-next,
.swipslider-6 .swiper-slide-duplicate-prev{
opacity:0.5;
}
/* Swiper Slide Box */
.swipslider-6 .swiper-slide .et_pb_social_media_follow{
opacity:0;
visibility:hidden;
transition:opacity .5s ease;
}
.swipslider-6 .swiper-slide:hover .et_pb_social_media_follow{
opacity:1;
visibility:visible;
}
.swipslider-6 .swiper-slide{
position:relative;
overflow:hidden;
}
.swipslider-6 .swiper-slide:hover .et_pb_team_member_description{
visibility:visible;
opacity:1;
}
.swipslider-6 .swiper-slide .et_pb_member_social_links li:last-child{
margin-right:0;
}
SwipSlider 7
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-7')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
loop:true,
centeredSlides: true,
autoplay: false,
speed: 2000,
// If we need pagination
pagination: {
el: '.swiper-pagination7',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next7',
prevEl: '.swiper-button-prev7',
},
breakpoints: {
480: { // Mobile
slidesPerView: 1,
spaceBetween: 30,
},
992: { // Tablet
slidesPerView: 2,
spaceBetween: 30,
},
1120: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-7 .swiper-slide-active{
border-color:#0080FF!important;
}
.swipslider-7 .swiper-button-next7,.swipslider-7 .swiper-button-prev7{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-7 .swiper-button-next7{
right:0;
}
.swipslider-7 .swiper-button-prev7{
left:0;
}
.swipslider-7:hover .swiper-button-next7,.swipslider-7:hover .swiper-button-prev7{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-7 .swiper-button-next7:after,.swipslider-7 .swiper-button-prev7:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-7 .swiper-button-next7:after{
content: 'next';
}
.swipslider-7 .swiper-button-prev7:after{
content: 'prev';
}
.swipslider-7 .swiper-pagination7{
position:absolute;
bottom:-60px!important;
}
.swipslider-7 .swiper-pagination-bullet {
background:#0080FF;
}
/*Pricing Box*/
.swipslider-7 .swiper-slide-active .et_pb_pricing_table{
border:1px solid#0080FF!important;
}
SwipSlider 8
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-8')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
autoplay: {
delay:3000,
},
speed: 1500,
// If we need pagination
pagination: {
el: '.swiper-pagination8',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next8',
prevEl: '.swiper-button-prev8',
},
breakpoints: {
768: { // Tablet
slidesPerView: 2,
spaceBetween: 40,
centeredSlides: false,
},
981: { // Desktop
slidesPerView: 4,
spaceBetween: 40,
}
}
});
}
}, 20);
}
})();
.swipslider-8 .swiper-button-next8,.swipslider-8 .swiper-button-prev8{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-8 .swiper-button-next8{
right:40px;
}
.swipslider-8 .swiper-button-prev8{
left:40px;
}
.swipslider-8:hover .swiper-button-next8,.swipslider-8:hover .swiper-button-prev8{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-8 .swiper-button-next8:after,.swipslider-8 .swiper-button-prev8:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-8 .swiper-button-next8:after{
content: 'next';
}
.swipslider-8 .swiper-button-prev8:after{
content: 'prev';
}
.swipslider-8 .swiper-pagination8{
position:absolute;
bottom:-60px!important;
}
.swipslider-8 .swiper-pagination-bullet {
background:#0080FF;
}
/*Image Overlay Icon*/
.swipslider-8 .et_pb_inline_icon:before{
background: #fff;
padding: 5px;
border-radius: 5px;
}
SwipSlider 9
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-9')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
loop:true,
autoplay: false,
speed: 2000,
// If we need pagination
pagination: {
el: '.swiper-pagination9',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next9',
prevEl: '.swiper-button-prev9',
},
breakpoints: {
480: { // Mobile
slidesPerView: 1,
spaceBetween: 30,
},
992: { // Tablet
slidesPerView: 2,
spaceBetween: 30,
},
1120: { // Desktop
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-9 .swiper-button-next9,.swipslider-9 .swiper-button-prev9{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-9 .swiper-button-next9{
right:0;
}
.swipslider-9 .swiper-button-prev9{
left:0;
}
.swipslider-9:hover .swiper-button-next9,.swipslider-9:hover .swiper-button-prev9{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-9 .swiper-button-next9:after,.swipslider-9 .swiper-button-prev9:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-9 .swiper-button-next9:after{
content: 'next';
}
.swipslider-9 .swiper-button-prev9:after{
content: 'prev';
}
.swipslider-9 .swiper-pagination9{
position:absolute;
bottom:-60px!important;
}
.swipslider-9 .swiper-pagination-bullet {
background:#0080FF;
}
SwipSlider 10
// adding navigation html
(function(){
window.addEventListener('DOMContentLoaded', function(){
let sliders = document.querySelectorAll('.swipslider-10')
sliders.forEach(function( slider ) {
swiper_init(slider)
})
});
function swiper_init(slider){
// configuration
if(slider === null) return;
// extra controls
let extraControls = '';
// If we need pagination
extraControls += '';
// If we need navigation buttons
extraControls += '';
slider.innerHTML = '' + extraControls;
// Wait for Swiper
var waitForSwiper = setInterval( function () {
if (typeof Swiper != "undefined") {
clearInterval(waitForSwiper);
let carousel_container = slider.querySelector('.swiper-container');
const swiper = new Swiper( carousel_container , {
loop:true,
autoplay: false,
speed: 2000,
// If we need pagination
pagination: {
el: '.swiper-pagination10',
clickable : true,
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next10',
prevEl: '.swiper-button-prev10',
},
breakpoints: {
480: { // Mobile
slidesPerView: 1,
spaceBetween: 30,
},
992: { // Tablet
slidesPerView: 2,
spaceBetween: 30,
},
1120: { // Desktop
slidesPerView: 4,
spaceBetween: 30,
}
}
});
}
}, 20);
}
})();
.swipslider-10 .swiper-button-next10,.swipslider-10 .swiper-button-prev10{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
margin-top:-35px;
top:50%;
width:4rem;
height:4rem;
border-radius:50%;
background:#fff;
color:#0080FF;
cursor:pointer;
box-shadow:5px 5px 30px -20px rgba(0, 0, 0, 0.3);
visibility:hidden;
opacity:0;
z-index:10;
transform:translate(0, 50px);
transition: 500ms ease-in;
}
.swipslider-10 .swiper-button-next10{
right:0;
}
.swipslider-10 .swiper-button-prev10{
left:0;
}
.swipslider-10:hover .swiper-button-next10,.swipslider-10:hover .swiper-button-prev10{
opacity:1;
visibility:visible;
transform:translate(0,0);
}
.swipslider-10 .swiper-button-next10:after,.swipslider-10 .swiper-button-prev10:after{
font-family: swiper-icons;
font-size:2rem;
}
.swipslider-10 .swiper-button-next10:after{
content: 'next';
}
.swipslider-10 .swiper-button-prev10:after{
content: 'prev';
}
.swipslider-10 .swiper-pagination10{
position:absolute;
bottom:-60px!important;
}
.swipslider-10 .swiper-pagination-bullet {
background:#0080FF;
}