Bootstrap Carousel change firing to late? - carousel

Question

I have an ASP.Net Core MVC web application and in my view I have a bootstrap carousel. I am trapping for the change event so I can get additional information of the image show. My problem is the image is not changing fast enough. When the change event fires and I get the unique image name it is still on the first image not the one being shown meaning the additional information I get is wrong.
Below is my bootstrap carousel: -
<div id="divCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<ul class="carousel-indicators">
#{
int Pos = 0;
}
#foreach (var photo in Model.PhotosList)
{
if (Pos == 0)
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id class="active"></li>
}
else
{
<li data-target="=#divCarousel" data-slide-to=#photo.Id></li>
}
Pos++;
}
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
#{
Int16 i = 0;
}
#foreach (var photo in Model.PhotosList)
{
var photoPath = "~/Photos/" + photo.PhotoPath;
if (i == 0)
{
<div class="carousel-item active">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
else
{
<div class="carousel-item">
<img class="photoSize" src="#photoPath" alt="No Photo" asp-append-version="true">
</div>
}
i++;
}
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#divCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#divCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
And here is my javascript to trap for the change event: -
#section Scripts {
<script>
function showPhotoDetails() {
var url = $('.carousel-item.active img').attr('src');
var photopath = url.split('?');
photopath[0] = photopath[0].substring(8, photopath[0].length);
$.ajax({
type: 'POST',
url: "/Photos/GetValue?path=" + photopath[0],
dataType: "json",
async: false,
success: function (data) {
$("input#txtCreatedBy").val(data.createdBy);
$("input#txtDateCreated").val(data.dateCreated);
$("textarea#txtNotes").val(data.notes);
}
});
}
$(document).ready(function () {
showPhotoDetails();
$('.custom-file-input').on("change", function () {
var fileLabel = $(this).next('.custom-file-label');
var files = $(this)[0].files;
if (files.length > 1) {
fileLabel.html(files.length + ' files selected.');
} else if (files.length == 1) {
fileLabel.html(files[0].name);
}
});
$('.carousel-control-previous').on("click", function () {
showPhotoDetails();
});
$('.carousel-control-next').on("click", function () {
showPhotoDetails();
});
});
</script>
}
I basically need to get the image name after the slide event. Any help much appreciated.
Thank you,

Answer 1

A managed to get this sorted. Basically rather than trapping for the click event of the previous and next I use the slid.bs.carousel class. All working fine now.