jquery – Swiper JS not exhibiting right variety of slides per view on cell

So, i am having this challenge. On my product web page, utilizing woocommerce, i modified the default gallery to a SwiperJS one, by utilizing the hook woocommerce_before_single_product_summary.
I eliminated the woocommerce_show_product_images and added a brand new perform i wrote to vary the html to the Swiper i needed to create.
I used a swiper with Thumbs (so its two swipers), however the issue i am having is:
When on cell, the thumbs swiper, which have slidesPerView: 4, solely reveals one slide and begins exhibiting 4 solely after scroll or click on on the slide.

So, i assumed it was a JavaScript rendering time challenge, so i made a decision to put it below a Doc Prepared perform, which did not work and did worse, exhibiting the wrong variety of slides at all times.

I’ve written my CSS for that particular swiper greater than as soon as, making an attempt to determine what’s the trigger, however not success.

Does anybody know why this occurs?

Sharing my code:

PHP Operate used on filter:

perform addImages()
{
  international $product;

  $video = get_field('video');
  $videoThumb = get_field('video_thumb');
  $slides = $product->get_gallery_image_ids();
  $mainImgId = $product->get_image_id();
?>
  <div class="swiper__block">
    <part class="swiper__product">
      <div class="swiper productSwiper" id="my-gallery">
        <ul class="swiper-wrapper" itemscope itemtype="http://schema.org/ImageGallery">
          <?php
          if ($video) { ?>
            <li class="swiper-slide">
              <div class="iframe-fw">
                <iframe class="yt__iframe" width="100%" src="https://www.youtube.com/embed/<?= $video ?>" title="YouTube video participant" frameborder="0" enable="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
            </li>
          <?php }
          $url = wp_get_attachment_image_src($mainImgId, 'full');
          if (!empty($mainImgId)) { ?>
            <li id="slide_1" class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
              <a itemprop="contentUrl" href="<?= $url[0] ?>" goal="_blank" data-pswp-width="<?= $url[1] ?>" data-pswp-height="<?= $url[2] ?>">
                <img src="<?= $url[0] ?>" itemprop="thumbnail" />
              </a>
            </li>
            <?php }
          if (!empty($slides)) {
            $c = 2;
            foreach ($slides as $slide) {
              $url = wp_get_attachment_image_src($slide, 'full'); ?>
              <li id="slide_<?= $c ?>" class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a itemprop="contentUrl" href="<?= $url[0] ?>" goal="_blank" data-pswp-width="<?= $url[1] ?>" data-pswp-height="<?= $url[2] ?>">
                  <img src="<?= $url[0] ?>" itemprop="thumbnail" />
                </a>
              </li>
          <?php }
          } ?>
        </ul>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <div thumbsSlider="" class="swiper productSwiper2">
        <ul class="swiper-wrapper">
          <?php
          if ($video) { ?>
            <div class="swiper-slide swiper-slide-thumb">
              <img src="<?= $videoThumb ?>" />
            </div>
          <?php }
          $url = wp_get_attachment_image_src($mainImgId, 'full');
          if (!empty($mainImgId)) { ?>
            <div class="swiper-slide swiper-slide-thumb">
              <img src="<?= $url[0] ?>" />
            </div>
            <?php }
          if (!empty($slides)) {
            foreach ($slides as $slide) {
              $url = wp_get_attachment_image_src($slide, 'full'); ?>
              <div class="swiper-slide swiper-slide-thumb">
                <img src="<?= $url[0] ?>" />
              </div>
          <?php }
          } ?>
        </ul>
      </div>
    </part>
  </div>
<?php

My JavaScript

 // Product Web page
    var swiper = new Swiper(".productSwiper2", {
      spaceBetween: 10,
      slidesPerView: 4,
      watchSlidesProgress: true,
    });

    var swiper2 = new Swiper(".productSwiper", {
      loop: true,
      slidesPerView: 1,
      spaceBetween: 10,
      centeredSlides: true,
      grabCursor: true,
      creativeEffect: {
        prev: {
          shadow: true,
          translate: ["-30%", 0, -1],
        },
        subsequent: {
          translate: ["100%", 0, 0],
        },
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });

My CSS:

.productSwiper {
  .swiper-button-next,
  .swiper-button-prev {
    colour: $gray600;
  }
}

.productSwiper2 {
  margin-top: 1rem;

  .swiper-slide {
    cursor: pointer;
  }
}

For plugins which may be impacting, i’ve ACF and WP-Rocket.

Any assistance is appreciated.