Jquery Fittext 不适用于 bootstrap carousel

Question

JSFiddle

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

我将 jquery Fittext 与 bootstrap carousel 一起使用，对于第一个和事件项目工作正常，因此对于另一个项目或(可能隐藏)它不起作用!

任何帮助!

谢谢

Answer 1

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

bootstrap 在轮播插件中有 2 个触发器 slide和slid (Read Documentation)。但你不能使用slide因为它在开始滑动之前触发，并且下一张幻灯片位于 display:none 的阶段fitText 插件将添加 minFontSize到它。您可以使用 slid 。滑动完成后会立即触发。因此，在这种情况下，为了避免闪烁，我们需要找到一个位置，它必须位于 display:none 之后。离开了。所以最理想的地方就是动画状态。因此，为了做到这一点，您需要观察类更改的元素并触发元素调整大小。

请在下面找到解决方案，

启动 fitText，Documentation

$(".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();
});