How to set the slidesPerView with partial slides on both ends using SwiperJS?

[graydirt]

Im new to SwiperJS. Right now my code is displaying 3 visible items with partial items on both sides. However I want 4 visible items on it instead of 3.

I don't know if theres something that I missed on swiper-api like slidesPerView, slidesPerGroup or anything else.

Reproduction link
https://codepen.io/graydirt/pen/VwNmaOd

Here is also my JS code for that gallery section.

var swiper2 = new Swiper(".mySwiperNav", {
  spaceBetween: 16,
  slidesPerView: 4.5,
  slidesPerGroup: 1,
  centeredSlides: true,
  loop: true,
  /*loopAdditionalSlides: 6,*/
  freeMode: true,
  watchSlidesProgress: true,
  allowTouchMove: true,
  keyboard: {
    enabled: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
var swiper = new Swiper(".mySwiperFor", {
  spaceBetween: 16,
  effect: "fade",
  thumbs: {
    swiper: swiper2,
  },
});

[eswar-janjanam]

I think with centeredSlides set to true you cannot do that, because we can center a particular slide only when we have odd number of slides set per view. May be you can try slidesPerView: 5.5. In this way, the 3rd slide will be centered with partial slides visible on both sides.