将 div img 更改为另一个中的活动图像

Question

I have two divs I need first div"border text-center rounded h-100 product-image" image change to the active image in the second div"item-slideshow" how to do that with jquery or javascript?? note it works only when clicking on the image how to make it slide dynamically with the active image?

 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

I used your jQuery code inside slideDynamic() function and some modification + add logic by automatically click with set time interval of 3500 microseconds .

I hope below snippet will help you lot.

 $(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>