跳转到特定项目时更新当前幻灯片的数量 - Bootstrap 3 Carousel [英] Update the current number of slide when jumping to specific item - Bootstrap 3 Carousel
问题描述
我修改了标准 Boostrap 3 Carousel,以便在 url 匹配 #
时能够跳转到特定幻灯片.它有效,但我的 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/total
.
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屋!