изменить div img на активное изображение в другом

Question

У меня есть два деления. Мне нужно, чтобы первый div «Граница текста по центру округлил h-100 product-image», изменил изображение на активное изображение во втором div «item-slideshow», как это сделать с jquery или * 1009. * ?? Обратите внимание, что это работает только при нажатии на изображение, как заставить его динамически скользить с активным изображением?

document.ready(() => {
  $('.page_content').on('click', '.item-slideshow-image', (e) => {
    const $img = $(e.currentTarget);
    const link = $img.prop('src');
    const $product_image = $('.product-image');
    $product_image.find('a').prop('href', link);
    $product_image.find('img').prop('src', link);

    $('.item-slideshow-image').removeClass('active');
    $img.addClass('active');
  });
})

<div class="col-md-4 h-100">
  <div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
    <img itemprop="image" class="website-image h-100 w-100" src="/files/developmentandsoftware-01.svg">
  </div>

  <div class="item-slideshow">
    <img class="item-slideshow-image mt-2" src="/files/developmentandsoftware-01.svg" alt="None">
    <img class="item-slideshow-image mt-2 active" src="/files/AutomatetoSurvive-01.svg" alt="None">
    <img class="item-slideshow-image mt-2" src="/files/completeSoultions-01.svg" alt="None">
  </div>
</div>
</div>

Answer 1

Я использовал ваш код jQuery внутри функции slideDynamic() и некоторые изменения + добавьте лог c, автоматически щелкнув с установленным интервалом времени 3500 microseconds.

Надеюсь, приведенный ниже фрагмент поможет вам ,

$(document).ready(() => {
  $('.page_content').on('click', '.item-slideshow-image', (e) => {
    slideDynamic(e);
  });
  setInterval(function(){
    var  totalSlide = $('.item-slideshow-image').length-1;
    var  getActiveInded = $('.item-slideshow-image.active').index();
    if (totalSlide==getActiveInded) {
      $('.item-slideshow-image').removeClass('active');
      $('.item-slideshow-image:nth-child(1)').addClass('active').trigger('click');
    }
    else{
      $('.item-slideshow-image.active').next().trigger('click');
    }    
  },3500);
});

function slideDynamic(e){
  const $img = $(e.currentTarget);
  const link = $img.prop('src');
  const $product_image = $('.product-image');
  $product_image.find('a').prop('href', link);
  $product_image.find('img').prop('src', link);
  $('.item-slideshow-image').removeClass('active');
  $img.addClass('active');
}

.item-slideshow-image{
  width: 60px;
  margin-right: 5px;
}
.item-slideshow-image.active{
  outline: 4px solid green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="container page_content">
  <div class="row">
    <div class="col-sm-6 col-md-4 h-100">
      <div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
        <img itemprop="image" class="website-image h-100 w-100" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1">
      </div>
      <div class="item-slideshow">
        <img class="item-slideshow-image mt-2 active" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1" alt="None">
        <img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Slide2" alt="None">
        <img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/000000/FFFFFF/?text=Slide3" alt="None">
      </div>
    </div>
    </div>
  </div>
</div>