jQuery文本大小調整插件僅適用於Bootstrap輪播的第一張幻燈片

Question

我正在使用一個名為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();
} );

謝謝。

Answer 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); 
})