I want to slick display a product gallery in the woocommerce catalog, what am I doing wrong?

Question

WooCommerce

It turns out game, product cards are stretched to the full, not in them inside in the desired container slider.

The tags appear to be closed.

add_action( 'woocommerce_before_shop_loop_item_title', ' themename_loop_product_div_image_open', 5);
function themename_loop_product_div_image_open(){
?>
  <div class="wrap-loop-img-item">
    <?php 
    global $product;       
    
    $attachment_ids = $product->get_gallery_attachment_ids();
    if ( ! empty( $attachment_ids ) ) {         
    foreach( $attachment_ids as $attachment_id ) {?><div class="slider-item"><?php 
    echo wp_get_attachment_image( $attachment_id, 'woocommerce_thumbnail' )?></div><?php ;
  }}else{
    $attachment_id = get_post_thumbnail_id( $product->get_id() );
    $product_thub = wp_get_attachment_image_url($attachment_id, 'woocommerce_thumbnail'); ?>
    <img src="<?php echo $product_thub;?>" alt="">      
      <?php 
  }
  ?>
<?php }
add_action( 'woocommerce_before_shop_loop_item_title', ' themename_loop_product_div_image_close', 30);
function  themename_loop_product_div_image_close(){  
  ?>
  </div>   
   <?php }

JS Without the lightbox, everything is the same. It doesn't matter.

jQuery('.wrap-loop-img-item').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots:false,
  arrows: false,  
  driggable:false,
  swipe: false,
 swipeToSlide: false,
 touchMove: false,
});
var sLightbox = jQuery(this);
  sLightbox.slickLightbox({
    src: 'src',
    itemSelector: '.img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail',   
  });
});