如何在轮播中获取具有有效类名的图像标签的src值？

Question

Consider this sample Carousel:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

Can you help me to get the src of the image tag that is active in the carousel display?

Answer 1

Find the desired element and get its src attribute..

 //let activeEle = document.getElementsByClassName('active'); let activeEle = document.querySelector('.carousel-item.active img'); console.log(activeEle.getAttribute('src')); 

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="thisisSource" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" 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="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 

Answer 2

You can use Document.querySelector() to target the element and Element.getAttribute() to get the source:

document.querySelector('.carousel-item.active > img').getAttribute('src')

 var activeElImgSrc = document.querySelector('.carousel-item.active > img').getAttribute('src'); console.log(activeElImgSrc); 

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src=".../test" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" 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="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 

Answer 3

Use the events available in bootstrap carousel plugin

$('#carouselId').on('slide.bs.carousel', function (e) {
  console.log($(e.relatedTarget).find('img').prop('src'))
})