jquery - jQuery Fittext不适用于引导轮播

JSFiddle

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

我将jQuery Fittext与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;
    }
})();

并在类更改时运行element resize事件。

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