0

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 updated, when jumping to a specific slide. The function for updating the pager-text is only working after an item has slid. Anyone have a solution?

My html:

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

My .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');

}
Tomas Jacobsen
  • 2,368
  • 6
  • 37
  • 81

2 Answers2

1

Fixed it by updating the pager-text in the if (url.match('#')) { function. Now I can type www.mydomain.com/gallery-url/#4 and I'm sent to the fourth image, and the pager-text displays 4/total.

$(document).ready(function() {  

    var url = document.location.toString();
    var totalItems = $('.item').length;

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

    $('.carousel').on('slid.bs.carousel', function () {

        var currentIndex = $('div.active').index() + 1;

        //Update pager-text
        $('.pager-text').text(''+currentIndex+'/'+totalItems+'');

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


    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');

        //Update pager-text
        $('.pager-text').text(''+url.split('#')[1]+'/'+totalItems+'');

    }


});
Tomas Jacobsen
  • 2,368
  • 6
  • 37
  • 81
  • Thanks for this solution. But I have one problem: when I go back to carousel page using browser, the carousel show the first slide and then go to the correct slide. Is there a way to correct this? – marcelo2605 Aug 28 '15 at 14:36
0

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);

});
Community
  • 1
  • 1
Schmalzy
  • 17,044
  • 7
  • 46
  • 47
  • Thank you for your answer, but when I try to replace the `if (url.match('#')) { ...` with `$('.carousel').carousel(number);` I always get to the first image in the carousel when I try #4. – Tomas Jacobsen Jan 14 '14 at 11:25
  • Sorry, it was my browser cache that did not registered the new javascript. It works, but how can I change the `$('.carousel').carousel(number);` to be 1 based, instead of 0 based? The first image/url should be #1 and not #0 (I think) – Tomas Jacobsen Jan 14 '14 at 11:37