Swiper slide - showing last slide 100%

Question

I'm tried to create a slider using swiper js. Is there a way to get similar as per Image?

1. For the 1,2 slider show 100% and 3 slide with 60% and move two slide at a time.
2. For last slide show only 3rd slide.

const swiperUserGuide = new Swiper('.swiper-userguide', {
  loop: false,
  slidesPerView: 2.7,
  slidesPerGroup: 2,
  centeredSlides: false,
  observer: true,
  observeParents: true,
  spaceBetween: 40,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    reachEnd: function () {
      const numberOfSlides = this.slides.length - 1;
      if(numberOfSlides) {
        document.querySelector('.swiper-userguide .swiper-slide:last-child').classList.add('swiper-slide-last');
      }
    }
  }
});

Answer 1

adding slidePerView and SpaceBetween will solve it

var swiper = new Swiper(".swiper", {
    slidesPerView: 4,
    spaceBetween: 16,
    breakpoints: {
        320: {
            watchSlidesProgress: true,
            slidesPerView: "1.2",
            shortSwipes: false
        },
        500: {
            watchSlidesProgress: true,
            slidesPerView: "2",
            shortSwipes: false
        },
        1024: {
            preventInteractionOnTransition: true,
            watchSlidesProgress: true,
            slidesPerView: "4.1",
            shortSwipes: false
        },
    },
});