Slick slider in woocommerce gallery, how to scroll top when clicking on bottom?

Question

JavaScript

The reference should be like here: https://cargasm.com.ua/catalog/hyundai/h-1-2004-20...
In woocommerce, I disabled the flexslider and hid the main gallery as a figure.
Instead, I brought the gallery out twice to make related sliders. Nothing good came of it. With a lightbox in the top, it came out, with a union, no. The lightbox at the bottom is not needed, and therefore, when clicked, it goes to the image page. And it is necessary that the picture opens in the upper large slider.
Tell me plz who understands well, at least in which direction to think. Maybe I'm doing it all wrong?
But this practice is used, and the sample at the link is also made on a slick, so it should be possible, it's just that I just came across.

jQuery

jQuery('.slider-big').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots:false,
  arrows: false,  
  driggable:false,
  prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
  nextArrow: "<span class='fa-arrow-right next' alt='2'>",
  asNavFor: '.slider-standart',
});
var sLightbox = jQuery(this);
  sLightbox.slickLightbox({
    src: 'src',
    itemSelector: '.woocommerce-product-gallery__image img',   
  });
});

jQuery('.slider-standart').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 1,
  driggable:false, 
  dots: false,
  arrows:false,  
   prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
  nextArrow: "<span class='fa-arrow-right next' alt='2'>",
  asNavFor: '.slider-big',
});
});

PHP

add_action( 'woocommerce_before_single_product_summary', 'wrapper_product_image_start', 5 );
function wrapper_product_image_start() {
  ?>
  <div class="row">
    <div class="col-lg-6 order-md-2 order-0">         
<?php 
 global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {?>
  <div class="slider-big">
  <?php  
  foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
  }
  ?>
  </div>
  <?php 
}          
  global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {?>
  <div class="slider-standart">
  <?php  
  foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
  }
  ?>
  </div>
  <?php 
}
 ?>
  <?php}

Answer 1

The SlickSlider documentation has an example of what you need, if I understand the task correctly. Your theme is 'Slider Syncing' https://kenwheeler.github.io/slick/