Bootstrap Carousel change firing to late?

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" [email protected] class="active"></li>
                    }
                    else
                    {
                        <li data-target="=#divCarousel" [email protected]></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.