Jquery Fittext不能与bootstrap轮播一起使用

Question

的jsfiddle

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

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

任何帮助！

谢谢

Answer 1

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

bootstrap在carousel插件slide和slid有2个触发器（ 阅读文档 ）。 但是你不能使用slide因为它在它开始滑动之前触发，而那个阶段下一张幻灯片display:none和fitText插件会将minFontSize添加到它。 你可以使用slid 。 滑动完成后会触发。 因此，在这种情况下为了避免闪烁，我们需要找到一个只需要在display:none之后的地方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;
    }
})();  

并在类更改时运行元素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事件中click ，

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