Firefox全屏引导carousel插件的问题

所以我对jQuery和javascript还是相当陌生的，所以我试着在代码上乱搞，以便在插件在Firefox中运行时解决我的问题。没有骰子，所以我来这里是为了寻求一些建议(也许是为了解释为什么会出现以下问题)。

这里的问题是，我有一些其他div，下面的一个包含旋转木马。在Firefox中，它最终用透明取代了我所有的其他图像和颜色背景，显示了我所有内容背后的旋转木马。

下面是插件的代码:

$('.header-carousel').carousel({
    pause: "false",
    interval: 4000
});
$('.header-carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
$('.header-carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
$('.carousel-inner div.item img').each(function() {
    var imgSrc = $(this).attr('src');
    $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
    $(this).remove();
});
$(window).on('resize', function() {
    $('.header-carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
}); 

希望我能有效地解释这个问题，我已经在这个问题上挣扎了好几天了…

---

编辑:

我在jsfiddle上做了一个例子。什么是最好的方式来强迫旋转木马不保持固定的背景时，滚动?

https://jsfiddle.net/pavelcreates/8nxwzgjz/

.header-carousel { z-index: -101; }