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

在类更改时运行元素resize事件。

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

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

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

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

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

并在click事件

中执行addClassChanged

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

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

1 个答案: