Я изменил стандартную карусель Boostrap 3, чтобы иметь возможность переходить на определенный слайд, когда URL совпадает#, Это работает, но мойpager-text не обновляется при переходе на конкретный слайд. Функция для обновленияpager-text работает только после того, как предмет сдвинулся. У кого-нибудь есть решение?

Мой HTML:

  <li class="pager-text">1/{{ object.photo_set.count }}</li>

Мой .js:

$(document).ready(function() {  

    //Initiate carousel
    $('.carousel').carousel({
        interval: false
    })

    $('.carousel').on('slid.bs.carousel', function () {
        var carouselData = $(this).data('bs.carousel');
        var currentIndex = carouselData.getActiveIndex();
        var total = carouselData.$items.length;

        // Display the current number of the slide
        var text = (currentIndex + 1) + "/" + total;
        $('.pager-text').text(text);

        // Update location based on slide (index is 0-based)
        window.location.hash = "#"+ parseInt($('.carousel .carousel-inner .item.active').index()+1);
    });


}); 


var url = document.location.toString();
if (url.match('#')) {
    // Clear active item
    $('.carousel .carousel-inner .item.active').removeClass('active');

    // Activate item number #hash
    $('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active');

}