Advanced woocommerce product gallery slider single product (ok)

#panel {
  width: 483px;
  position: relative;
  float: left;
}
#thumbs{
  position: absolute;
  right: 0;
  width: 76px;
  height: 350px;
  overflow-x: hidden;
  overflow-y: scroll;
  @include translateY50;
  @include flexbox;
  @include flexcolumn;
  img {
    border: 1px solid #C4C4C4;
    height: 100%;
    @include objectfit;
  }
  .thumb {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    &.active {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1;
      img {
        border: 1px solid #EC4A23;
      }
    }
  }
  .woocommerce-product-gallery__image {
    height: 76px;
    width: 76px;
    margin-bottom: 15px;
    @include borderbox;
    &:last-child {
      margin-bottom: 0;
    }
  }
  &::-webkit-scrollbar {
    width: 0;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}
.thumb {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
}
.controls {
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
  i {
    position: absolute;
    right: 32px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  i.prev {
    top: 0;
  }
  i.next {
    bottom: 0;
  }
  img {
    cursor: pointer;
    margin: 0px;
  }
  span {
    font-size: 13px;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
  }
}
#large{
   .woocommerce-product-gallery__image.active {
    width: 390px;
    height: 390px;
    >img {
      width: 100%;
      height: 100%;
      @include objectfit
    }
   }
   .controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
   }
   .thumb {
    display: none;
  }
  .active {
    display: block;
    img {
      border: 2px solid #333;
    }
  }
}

jQuery(document).ready(function($) {
  $(function() {
    var getIndex = $("#thumbs").find(".active").index();
    $(".controls").each(function() {
        $(this).find(".next").click(function() {
            getIndex = $("#thumbs").find(".active").index();
            getIndex += 1;
            if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
                getIndex = 0;
            }
            setActiveImage(getIndex);
        });
        $(this).find(".prev").click(function() {
            getIndex -= 1;
            if (getIndex < 0) {
                getIndex = $("#thumbs").find(".thumb").length - 1;
            }
            setActiveImage(getIndex); 
        });
    });

});
$("#thumbs .thumb").on('click',function(){
    var index=$(this).index();
    setActiveImage(index);
})
function setActiveImage(index) {
    if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
    $("#thumbs").find(".thumb").removeClass("active");
    $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
    $("#large").find(".thumb").removeClass("active");
    $("#large").find(".thumb:eq(" + index + ")").addClass("active");
  }
});  

function filter_woocommerce_single_product_image_thumbnail_html( $sprintf, $post_id ) { 
   global $product;
   global $woocommerce;
   $src  = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'large' );
   if ( get_post_thumbnail_id() !== intval( $attachment_id ) ) {
       $html  = '<div class="active thumb woocommerce-product-gallery__image">';
       $html .= sprintf( '<img src="'.$src[0].'" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
       $html .= '</div>';
   }
   return $html;
}; 
add_filter( 'woocommerce_single_product_image_thumbnail_html_ct', 'filter_woocommerce_single_product_image_thumbnail_html', 10, 2 );
function wc_get_gallery_image_html_ct( $attachment_id, $main_image = false ) {
  $flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
  $gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
  $thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
  $image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'large' : $thumbnail_size );
  $full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
  $thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
  $full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
  $alt_text          = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
  $image             = wp_get_attachment_image(
    $attachment_id,
    $image_size,
    false,
    apply_filters(
      'woocommerce_gallery_image_html_attachment_image_params',
      array(
        'title'                   => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
        'data-caption'            => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
        'data-src'                => esc_url( $full_src[0] ),
        'data-large_image'        => esc_url( $full_src[0] ),
        'data-large_image_width'  => esc_attr( $full_src[1] ),
        'data-large_image_height' => esc_attr( $full_src[2] ),
        'class'                   => esc_attr( $main_image ? 'wp-post-image' : '' ),
      ),
      $attachment_id,
      $image_size,
      $main_image
    )
  );
  return '<div class="thumb woocommerce-product-gallery__image">'.$image.'</div>';
}