Search code examples
wordpressswiper.jsgenesis

SwiperJS shows 5 posts/slides instead of 3, despite having slidesPerView: 3 - Wordpress, Genesis Featured Posts widget, swiperJS


I'm trying to make a SwiperJS slider using the Genesis Featured Post widget. I'd like the slider to show 3 out of a total of 5 posts.

The Problem
The slider shows all 5 posts, despite setting slidesPerView: 3

Swiper Initialization Code

var swiper = new Swiper('.swiper', {

          spaceBetween: 30,

           slidesPerView: 3,

           autoplay:false,
     
          pagination: {

            el: '.swiper-pagination',

            clickable: true,
          },

          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',

          },
       });

Screenshot from Inspector Screenshot from Inspector

Screenshot from Website showing 5 instead of 3 posts/slides Screenshot from Swiper showing 5 instead of 3 posts/slides

Screenshot from Genesis Featured Post setup

Screenshot from Genesis Featured Post setup


Solution

  • It's bad CSS code. Everything else works fine.