jQuery Text Resizing Plugin 仅适用于 Bootstrap Carousel 的第一张幻灯片

Posted 2023-02-22

【中文标题】jQuery Text Resizing Plugin 仅适用于 Bootstrap Carousel 的第一张幻灯片

【英文标题】：jQuery Text Resizing Plugin Only Applied to First Slide of a Bootstrap Carousel

【发布时间】：2014-10-09 15:45:57

【问题描述】：

我正在使用一个名为 WideText 的轻量级 jQuery 插件来调整 Bootstrap 3 轮播幻灯片上的标题大小。

它通过添加具有计算出的字体大小的样式来使文本（span class="responsive"）适应包含 div 的整个宽度。

当页面加载时，第一张幻灯片的标题会应用字体大小样式。但是当下一张幻灯片进来时，字体大小样式并没有应用。

这里是a picture of the first slide and then the next slide（我没有足够的信誉在这里发布图片）。

我找到了similar issue on Stack Overflow for a different plugin，其想法是在活动幻灯片之后找到下一个项目并调用插件。但我无法使该解决方案发挥作用。

如何将 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();
 );

谢谢。

【参考方案1】：

好的，经过 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); 
)