3

JSFiddle

Link jsfiddle  https://jsfiddle.net/jimmyphong/867wvc9u/2/

我将 jquery Fittext 与引导轮播一起使用，因为第一个和活动项目工作正常，所以与另一个项目或（可能隐藏）它不起作用！

任何帮助！

谢谢

4

1 回答 1

1

这是一个老问题，但如果其他人来寻求答案，这里是一个快速的解决方案。

bootstrap 在 carousel 插件slide和slid（阅读文档）中有 2 个触发器。但是你不能使用slide它，因为它在它开始滑动之前触发并且下一张幻灯片在那个阶段display:none并且 fitText 插件将添加minFontSize到它。你可以使用slid. 它会在滑动完成后触发。所以在这种情况下，为了避免在这个问题上闪烁，我们需要找到一个它必须在它display:none消失之后的地方。所以理想的地方是动画状态。因此，为了做到这一点，您需要观察具有类更改的元素并触发元素调整大小。

请在下面找到解决方案，

启动 fitText，文档 

$(".fittext").fitText(0.2, { minFontSize: '20px', maxFontSize: '100px' });

为 jquery 编写一个观察者扩展addClass 

// Extends functionality of ".addClass()"
(function(){
    var originalAddClassMethod = jQuery.fn.addClass;
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        $(this).trigger('addClassChanged');
        return result;
    }
})();

并在类更改时运行元素调整大小事件。

$('.carousel-item').on('addClassChanged', function(){
    $(window).resize();
});

更新了 jsfiddle：https ://jsfiddle.net/867wvc9u/12/

注意：-由于resize事件一直监听 DOM，我们可以稍微调整 fitText 插件来克服意外的调用堆栈过度杀伤问题。

更新 fitText 插件中的窗口事件行。

...
$(window).on('resize.fittext click.fittext orientationchange.fittext', resizer);
...

而是做一个click，在addClassChanged事件中，

$('.carousel-item').on('addClassChanged', function(){
    $(window).click();
});
于 2017-11-13T10:24:35.907 回答