Pop-up

We've been thru all headaches to create a popup in a slider so you don't have to. Clone away!

Get to know our team

Personal Image of a member from Flow Ninja.
Uros Mikic
View Details
Personal Image of a member from Flow Ninja.
Stefan Mikic
View Details
Personal Image of a member from Flow Ninja.
Marko Vukic
View Details
Personal Image of a member from Flow Ninja.
Tamara Vitas
View Details
Personal Image of a member from Flow Ninja.
Kristina Ivanovic
View Details
Uros Mikic
CEO, Webflow Expert
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Stefan Mikic
Head of Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Marko Vukic
Head of Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Tamara Vitas
Project Manager
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Kristina Ivanovic
Head of Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Clone

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>