Update the current number of slide when jumping to specific item - Bootstrap 3 Carousel

Question

I modified the standard Boostrap 3 Carousel to be able to jump to a specific slide, when the url matches #. It works, but my pager-text is not upda

Answer 1

Use $('.carousel').carousel(number) to jump to a specific slide.

From the bootstrap docs

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

See this question for more information on jumping to a specific slide using hash values.

Also, your code to jump to a slide will execute before your custom code to update pager-text is registered, it also wont register as a "slide" because you are not using the built in function to jump to a slide.

Something like this should give you the results you are looking for.

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

    //Event: Update pager-text on slide
    $('.carousel').on('slid.bs.carousel', function () {
        ...
    });

    //Jump to slide on page load
    $('.carousel').carousel(number);

});