.png)
Pop-up
We've been thru all headaches to create a popup in a slider so you don't have to. Clone away!
.png)
Get to know our team
You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.
Paste this before <body> in project settings
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
/* This is code for main swiper on page */
var mySwiper = new Swiper ('#flow-ninja-team-swiper', {
slidesPerView: 4.2,
slidesPerGroup: 1,
a11y: false,
spaceBetween: 22,
allowTouchMove: true,
navigation: {
nextEl: '#fnt-arrow-next-slide',
prevEl: '#fnt-arrow-prev-slide',
},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 1.2,
slidesPerGroup:1,
spaceBetween: 22,
},
480: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 2.2,
slidesPerGroup:1,
spaceBetween: 22,
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: 3.2,
slidesPerGroup:1,
spaceBetween: 22,
},
992: { /* when window >= 988px - webflow desktop */
slidesPerView: 4.2,
slidesPerGroup:1,
spaceBetween: 22,
}
},
});
/* Pop-up Swiper */
const modalSwiper = new Swiper('#pop-up-swiper', {
spaceBetween: 30,
allowTouchMove: true,
speed:900,
slidesPerView: 1.2,
centeredSlides:true,
loop:true,
slidesPerGroup: 1,
pagination: {
el: '.pop-up-pagination',
clickable: true,
},
navigation: {
nextEl: '#pop-up-arrow-next-slide',
prevEl: '#pop-up-arrow-prev-slide',
},
});
/* Use this code to target current slide in pop-up, add swiper slide
class from main slider*/
$('.flow-ninja-team-swiper-slide').click(function() {
var index = $(this).index() + 2;
modalSwiper.slideTo(index);
});
</script>
Paste this inside <html> tag in project settings
<style>
@media only screen and (max-width: 767px) {
.pop-up-slide.swiper-slide-active {
height: 400px !important;
}
.pop-up-slide.swiper-slide-duplicate-active {
height: 400px !important;
}
}
@media only screen and (max-width: 567px) {
.pop-up-slide.swiper-slide-active {
height: 300px !important;
}
.pop-up-slide.swiper-slide-duplicate-active {
height: 300px !important;
}
}
.pop-up-slide.swiper-slide-active {
height: 580px;
}
.pop-up-slide.swiper-slide-duplicate-active {
height: 580px;
}
.swiper-pagination-bullet{
display: block;
width: 10px;
height: 10px;
background: #FFFFFF;
opacity: 0.3;
border-radius: 50%;
margin: 0 6px;
cursor:pointer;
transition: all ease 0.2s;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1;
width:16px;
height:16px;
}
.swiper-pagination-bullet:hover {
opacity:1;
}
</style>