如果我单击下一个/上一个，如何立即显示从轮播到第二个div的活动图像？

Question

I'm having problem displaying an active image from carousel to my 2nd div when I click next/ previous. Looks like it's delayed when I click next/ previous.

 function strapActiveImage() { var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src'); document.getElementById('strap_logo').src = activeElImgSrc; document.getElementById('strap_logo2').src = activeElImgSrc; } 

  <!-- STRAP --> <div class="justify-content-center body-inner"> <div class="personalize-item-title left-align bold"> <span>STRAP</span> </div> <!-- CarouselBegin --> <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top"> </div> <div class="carousel-item"> <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top"> </div> </div> <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <span>LEATHER</span> <!-- CarouselEnd--> </div> <!-- STRAP END --> <div class="justify-content-center body-inner"> <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo"> <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2"> </div> 

Answer 1

For the benefit of those who are looking for an answer for a question/ problem like this one, I was able to solve my own problem by adding an onload="strapActiveImage()" to the image tag (where display is happening). Here is the code:

 function strapActiveImage() { var activeElImgSrc = document.querySelector('div#strap_carousel>div.carousel-inner>.carousel-item.active > img').getAttribute('src'); document.getElementById('strap_logo').src = activeElImgSrc; document.getElementById('strap_logo2').src = activeElImgSrc; } 

  <!-- STRAP --> <div class="justify-content-center body-inner"> <div class="personalize-item-title left-align bold"> <span>STRAP</span> </div> <!-- CarouselBegin --> <div id="strap_carousel" data-interval="false" class="carousel" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="stap_design/strap_1.png" class="personalize-left-strap margin-top"> </div> <div class="carousel-item"> <img src="stap_design/strap_2.png" class="personalize-left-strap margin-top"> </div> </div> <a class="carousel-control-prev" href="#strap_carousel" role="button" onclick="strapActiveImage()" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#strap_carousel" onclick="strapActiveImage()" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <span>LEATHER</span> <!-- CarouselEnd--> </div> <!-- STRAP END --> <div class="justify-content-center body-inner"> <img src = "stap_design/strap_1.png" class="strap_display" id="strap_logo" onload="strapActiveImage()"> <img src="stap_design/strap_1.png" class="strap_display2" id="strap_logo2" onload="strapActiveImage()"> </div>