跳转到特定项目时，更新当前的幻灯片数量 - Bootstrap 3 Carousel [英] Update the current number of slide when jumping to specific item - Bootstrap 3 Carousel

问题描述

当网址匹配＃时，我修改了标准的Boostrap 3 Carousel，以便能够跳转到特定的幻灯片。它有效，但跳转到特定幻灯片时，我的 pager-text 未更新。更新 pager-text 的功能仅在项目滑动后才起作用。有人有解决方案吗？

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?

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

}

推荐答案

修正了它通过更新 if（url.match（'＃'））{函数中的寻呼机文本。现在我可以输入www.mydomain.com/gallery-url/#4并将其发送到第四张图像，并且寻呼机文本显示 4 /总计。

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

    }


}); 

这篇关于跳转到特定项目时，更新当前的幻灯片数量 - Bootstrap 3 Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！