Задать вопрос
@djokerik
Front-end

Как подключить swiper.js к карточке товара на странице архива?

Свайпер работает на странице single product, но не работает в карточке товара на странице архива
5df00ca5859da869144252.png
function woocommerce_show_product_swiper(){
	?>
		<!-- 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.25s 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
  }
});
  • Вопрос задан
  • 1012 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
RuliaKill
@RuliaKill
Head of IT Department, Full stack web developer
В скрипте у вас указаны селекторы блоков навигации:
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
}

Нужно добавить эти блоки в div.swiper-wrapper
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>

Пример на github
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы