How to connect swiper.js to the product page on the archive page?

Swiper works on the single product page but not working in the item card page archive
5df00ca5859da869144252.png
woocommerce_show_product_swiper function(){
?>
 <!-- Swiper -->
 <div class="gallery_swiper_block woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images" data-columns="4" style="opacity: 1; transition: opacity 0.25 s ease-in-out 0s;">
 <figure class="woocommerce-product-gallery__wrapper">
 <div class="swiper-container gallery-top">
 <div class="swiper-wrapper woocommerce-product-gallery__image">
 <?php if ( has_post_thumbnail() ) : ?>
 <div class="swiper-slide" style="background-image:url()"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></div>
 <?php endif; ?>
<?php
 global $product;
 $attachment_ids = $product->get_gallery_attachment_ids();
 foreach( $attachment_ids as $attachment_id ) {
 ?><div class="swiper-slide" style="woocommerce-product-gallery__image"><img src="<?php echo $image_link = wp_get_attachment_url( $attachment_id ); ?>" alt=""></div><?php
}
 ?> 
</div>
</div>
 <div class="swiper-container gallery-thumbs">
 <div class="swiper-wrapper">
 <?php if ( has_post_thumbnail() ) : ?>
 <div class="swiper-slide" style="woocommerce-product-gallery__image"><img src="<?php the_post_thumbnail_url(); ?>" alt=""></div>
 <?php endif; ?>
<?php
 global $product;
 $attachment_ids = $product->get_gallery_attachment_ids();
 foreach( $attachment_ids as $attachment_id ) {
 ?><div class="swiper-slide" style="woocommerce-product-gallery__image"><img src="<?php echo $image_link = wp_get_attachment_url( $attachment_id ); ?>" alt=""></div><?php
}
 ?> 
</div>
</div>
</figure>
</div>
<?php
}

// swiper
var galleryThumbs = new Swiper('.gallery-thumbs', {
 spaceBetween: 10,
 slidesPerView: 3,
 freeMode: true,
 watchSlidesVisibility: true,
 watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
 spaceBetween: 10,
 navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
},
 thumbs: {
 swiper: galleryThumbs
}
});
April 3rd 20 at 17:23
1 answer
April 3rd 20 at 17:25
In the script you specified selectors navigation units:
navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
}

You need to add these blocks in div.swiper-wrapper
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>

Example on github
Did not help - Broderick_Ziemann commented on April 3rd 20 at 17:28
@Broderick_Ziemann, the Error has not changed? - Rosemarie29 commented on April 3rd 20 at 17:31
@Rosemarie29, no - Broderick_Ziemann commented on April 3rd 20 at 17:34

Find more questions by tags JavaScriptWooCommerceSwiper