跳转到特定项目时更新当前幻灯片数量 - Bootstrap 3 Carousel

Question

我修改了标准的 Boostrap 3 Carousel，以便能够在 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');

}

Answer 1

通过更新if (url.match('#')) { 函数中的寻呼机文本来修复它。现在我可以输入 www.mydomain.com/gallery-url/#4 并被发送到第四张图片，页面文本显示为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+'');

    }


}); 

Answer 2

使用$('.carousel').carousel(number) 跳转到特定幻灯片。

来自引导文档

.carousel(数字)

将轮播循环到特定帧（从 0 开始，类似于数组）。

有关使用哈希值跳转到特定幻灯片的更多信息，请参阅 this question。

此外，您的跳转到幻灯片的代码将在您的自定义代码更新pager-text 注册之前执行，它也不会注册为“幻灯片”，因为您没有使用内置函数跳转到幻灯片。

这样的事情应该会给你你正在寻找的结果。

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

});