[英]jQuery Text Resizing Plugin Only Applied to First Slide of a Bootstrap Carousel
我正在使用一个名为WideText的轻量级jQuery插件来调整Bootstrap 3轮播幻灯片上的标题的大小。
通过添加具有计算出的字体大小的样式,使文本(span class =“ response”)适合包含div的整个宽度。
页面加载时,第一张幻灯片的标题将应用字体大小样式。 但是当下一张幻灯片进来时,将不应用字体大小样式。
这是第一张幻灯片,然后是下一张幻灯片的图片 (我的信誉不足,无法在此处发布图像)。
我在另一个插件的Stack Overflow上发现了类似的问题 ,其想法是在活动幻灯片之后找到下一个项目并调用该插件。 但是我无法使该解决方案生效。
如何将WideText插件应用于轮播中的所有字幕,以便在每张图像滑入时出现?
这是插件的实际代码:
(function($) {
$.fn.wideText = function() {
return this.each( function() {
// Add "wtext" class to each element and then set up the magic
var obj = $(this),
rtext = obj.addClass( 'wtext' );
// Work that magic each time the browser is resized
$(window).on( 'resize', function() {
obj.css( {'fontSize': parseInt( obj.css('fontSize')) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
} ).resize();
});
};
} )(jQuery);
这是放在页面底部的代码:
$(window).load( function() {
$( '.responsive' ).wideText();
} );
谢谢。
好的,因此在由Jquery专业人士进行了一些故障排除之后,我们想到了这些额外的代码。
// auto type width adjustment in #primary-carousel images
$(window).load( function() {
$( 'h1 span.responsive' ).wideText();
} );
// hack for invisible carousel wideText timing problem
// boostrap carousel sends an event "slide.bs.carousel" when it begins to slide
$('#primary-carousel').on("slide.bs.carousel", function(){
setTimeout(function(){
$(window).trigger('resize');
}, 40);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.