Grid slider

Create larger previews when you need to showcase more content.

Personal image of a member from Flow Ninja.
Uros Mikic

CEO, Webflow Expert

Twitter Logo LinkLinked In Logo Link
Personal image of a member from Flow Ninja.
Stefan Mikic

Head of Development

Twitter Logo LinkLinked In Logo Link
Personal image of a member from Flow Ninja.
Marko Vukic

Head of Development

Twitter Logo LinkLinked In Logo Link
Personal image of a member from Flow Ninja.
Tamara Vitas

Project Manager

Twitter Logo LinkLinked In Logo Link
Personal image of a member from Flow Ninja.
Kristina Ivanovic

Head of Design

Twitter Logo LinkLinked In Logo Link
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

<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<script>
swiper = new Swiper(".grid-slider", {
     speed: 500,
     grabCursor: true,
     slidesPerView: 2,
     slidesPerColumn: 2,
     a11y: false,
     slidesPerGroup: 6,
     slidesPerColumnFill: 'column',
     freeMode: false,
     spaceBetween: 30,
     navigation: {
    nextEl: '#grid-arrow-next-slide',
  prevEl: '#grid-arrow-prev-slide',
},
      breakpoints: {
     0: { /* when window >=0px - webflow mobile landscape/portriat */
         slidesPerView: 1,
        slidesPerColumn:1,
        slidesPerGroup: 1,
        slidesPerColumnFill: 'column',
       spaceBetween: 20,
     },
     480: { /* when window >=480px - webflow mobile landscape/portriat */
         slidesPerView: 1,
        slidesPerColumn:1,
        slidesPerGroup: 1,
        slidesPerColumnFill: 'column',
       spaceBetween: 20,
     },
     767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2,
        slidesPerColumn:2,
        slidesPerGroup: 1,
        slidesPerColumnFill: 'column',
       spaceBetween: 30,
     },
     992: { /* when window >= 992px - webflow desktop */
        slidesPerView: 2,
        slidesPerColumn:2,
        slidesPerGroup: 1,
        slidesPerColumnFill: 'column',
       spaceBetween: 30,
     },
     1000: { /* when window >= 1000px - webflow desktop */
        slidesPerView: 2,
        slidesPerColumn:2,
        slidesPerGroup: 2,
        slidesPerColumnFill: 'column',
       spaceBetween: 30,
     }
   }
     });
   
   if(swiper.slides.length <= 1)
   {
    $(swiper.scrollbar.el).parent().hide();
   };
 
</script>