<?php
global $product;
$attachment_ids = $product->get_gallery_image_ids();
?>
<div class="product-gallery-slider">
<div class="product-gallery-slider-big">
<?php
foreach( $attachment_ids as $attachment_id ) {
$image_link = wp_get_attachment_image_src( $attachment_id, 'big-square' )[0]; ?>
<div data-src="<?php echo $image_link; ?>" class="product-gallery-slider-big-zoom">
<img src="<?php echo $image_link; ?>" class="wp-post-image" />
</div>
<?php
}
?>
</div>
<div class="product-gallery-slider-thumbs">
<?php
foreach( $attachment_ids as $attachment_id ) {
$image_link = wp_get_attachment_image_src( $attachment_id, 'big-square' )[0]; ?>
<div class="slider-nav__item">
<img src="<?php echo $image_link; ?>" class="wp-post-image" />
</div>
<?php
}
?>
</div>
</div>$('.product-gallery-slider-big').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
arrows: false,
asNavFor: '.product-gallery-slider-thumbs',
responsive: [{
breakpoint: 777,
settings: {
fade: false,
dots: true,
}
}, ]
});
$('.product-gallery-slider-thumbs').slick({
slidesToShow: 3,
slidesToScroll: 1,
vertical: true,
asNavFor: '.product-gallery-slider-big',
dots: false,
arrows: false,
focusOnSelect: true,
responsive: [{
breakpoint: 777,
settings: {
vertical: false,
fade: false,
}
}, ]
});