jquery – Swiper JS not showing correct number of slides per view on mobile

Question

So, i’m having this issue. On my product page, using woocommerce, i changed the default gallery to a SwiperJS one, by using the hook woocommerce_before_single_product_summary.
I removed the woocommerce_show_product_images and added a new function i wrote to change the html to the Swiper i wanted to create.
I used a swiper with Thumbs (so its two swipers), but the problem i’m having is:
When on mobile, the thumbs swiper, which have slidesPerView: 4, only shows one slide and starts showing 4 only after scroll or click on the slide.

So, i assumed it was a JavaScript rendering time issue, so i decided to place it under a Document Ready function, which didn’t work and did worse, showing the incorrect number of slides always.

I’ve written my CSS for that specific swiper more than once, trying to figure out what is the cause, but not success.

Does anyone know why this happens?

Sharing my code:

PHP Function used on filter:

function addImages()
{
  global $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">
    <section 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 player" frameborder="0" allow="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] ?>" target="_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] ?>" target="_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>
    </section>
  </div>
<?php

My JavaScript

 // Product 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],
        },
        next: {
          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 {
    color: $gray600;
  }
}

.productSwiper2 {
  margin-top: 1rem;

  .swiper-slide {
    cursor: pointer;
  }
}

For plugins that may be impacting, i have ACF and WP-Rocket.

Any help is appreciated.

0
Migl Araújo 1 month 2022-10-20T15:03:44-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse