Product Slider with gallery thumbnail

how do I change the photos when you click on the images in the gallery, in my code I can display the galleries but do not change when clicking on any.

https://i.stack.imgur.com/CLl71.png

<div class="owl-carousel">

<?php
if ( $loop->have_posts() ): while ( $loop->have_posts() ): $loop->the_post(); ?>
<div>
      <?php  global $product;  ?>
      <?php echo $product->get_image(); ?>
    <?php $attachment_ids = $product->get_gallery_image_ids($product_id);
    foreach( $attachment_ids as $attachment_id )
        { ?>
  <div class="">
  <?php        echo wp_get_attachment_image($attachment_id, 'full'); ?>
</div>
  <?php       }      ?>
      <hr class="prod">
     <h1><?php   echo $product->get_title(); ?></h1>
        <h2><?php   echo $product->get_short_description(); ?></h2>
        <span class="price"><?php   echo $product->get_price_html(); ?></span>
</div>
<?php
endwhile; endif; wp_reset_postdata();
?>