Is loopFillGroupWithBlank deprecated? How can I add blank slides to fill slides in the final group.

[james0r]

I'm using

              slidesPerGroup: 3,
              slidesPerView: 3,

but with 4 slides and pagination. How can achieve creating 2 pages with 3 slides on the first page and 1 slide + 2 blank slides on the second page?

I feel like i'm taking crazy pills.

[james0r]

Ended up achieving it manually in the alpine component below but just surprised if this isn't achievable with swiper native properties.

 Alpine.data('benefitsCarousel', function() {
    return {
      swiperInstance: null,
      slidesPerGroup: 3,
      init() {
        const breakpointLg = window.matchMedia("(min-width:1024px)")
        const breakpointMd = window.matchMedia("(min-width:768px)")

        const breakpointChecker = () => {
          if (breakpointLg.matches === true) {
            this.disableSwiper()
            this.slidesPerGroup = 3;
            this.enableSwiper();
          } else if (breakpointMd.matches === true) {
            this.disableSwiper()
            this.slidesPerGroup = 2;
            this.enableSwiper();
          } else {
            this.disableSwiper()
            this.slidesPerGroup = 1;
            this.enableSwiper();
          }
        }

        breakpointChecker();

        window.addEventListener('resize', breakpointChecker)

      },
      maybeAppendSlides() {
        this.$el.querySelectorAll('.swiper-slide.blank-slide').forEach((slide) => {
          slide.remove()
        })

        if (this.swiperInstance.slides.length % this.slidesPerGroup === 0) {
          return
        }

        while (this.swiperInstance.slides.length % this.slidesPerGroup !== 0) {
          this.swiperInstance.appendSlide('<div class="swiper-slide blank-slide"></div>')
        }
      },
      disableSwiper() {
        if (this.swiperInstance !== null) this.swiperInstance.destroy(true, true);
        this.swiperInstance = null;
      },
      enableSwiper() {
        this.swiperInstance = new Swiper(this.$el.querySelector('.swiper'), {
          loop: true,
          pagination: {
            el: this.$el.querySelector('.swiper-pagination'),
            clickable: true,
          },
          autoplay: {
            delay: 4000,
            disableOnInteraction: true
          },
          breakpoints: {
            0: {
              slidesPerView: this.slidesPerGroup,
              slidesPerGroup: this.slidesPerGroup,
              spaceBetween: 0,
            },
            576: {
              slidesPerGroup: this.slidesPerGroup,
              slidesPerView: this.slidesPerGroup,
              spaceBetween: 40,
            },
            920: {
              slidesPerGroup: this.slidesPerGroup,
              slidesPerView: this.slidesPerGroup,
              spaceBetween: 82,
            }
          }

        })

        this.maybeAppendSlides()
        this.swiperInstance.autoplay.stop()
      },
    }
  })