使用bxslider / jQuery制作视差背景图像

Question

我想在一个页面上有3个视差背景图像，似乎可以正常工作，但我也需要让它们有一个旋转盘效果，所以我使用bxslider视差代码。

第一张幻灯片显示出来(尽管它不是以100%的宽度显示)，但滑动条中的其他两个图像没有。

这是我使用的样式:

.parallax {
background-size:cover;
min-height:1224px;
overflow:auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}

这是html:

<div id="carousel">
<ul class="bxslider">                 
    <li class="parallax" style="background-image:url(images/test2.jpg);">
        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>
    </li>
    <li class="parallax" style="background-image:url(images/test2.jpg);">
        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>
    </li>      
    <li class="parallax" style="background-image:url(images/test2.jpg);">
        <div class="parallax" style="border: 1px solid red; background-image:url(images/test2.jpg);">...</div>
    </li>
</ul>

我不确定是否允许链接，但我正在工作的页面可以在这里看到:http://ldswebsites.co.uk/intone/test.html

似乎这是背景附件:固定是什么导致的问题，因为当我拿出旋转木马上的图像显示，但它失去了视差效果的其余图像。有别的办法吗?

提前感谢:)

Answer 1

作者没有发布他的答案
所以为了解决这个问题，I 删除了background-attachment:fixed，因为它会产生问题
I 添加了一个函数来模拟视差图像。

function parallax(){
    var scrolled = $(window).scrollTop();
    $('myBxSlider li').css('background-position',"0 "+  (scrolled * 1) + 'px');
}
$(window).scroll(function(){
    parallax();
});

我从这个链接复制了这个代码:https://www.sitepoint.com/community/t/translate-3d-fixed-background-on-slick-slide/244637/7
回复:RyanReese