Jquery Fittext 不适用于引导轮播

Question

JSFiddle

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

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

任何帮助！

谢谢

Answer 1

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

bootstrap 在轮播插件 slide 和 slid (Read Documentation) 中有 2 个触发器。但是你不能使用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);
...

并在addClassChanged 事件中执行click，

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