Javascript 如何制作具有简单视差效果的引导转盘？

我正在使用引导转盘。现在它工作得很好（如bootstrap网站所示）

我想做的是使整个滑块（包括图像、按钮、标题..）的位置：

固定

以在向下滚动时提供简单的视差效果

这是一个例子

$（函数（）{
$（“#家庭旋转木马”）。旋转木马({
间隔时间：2000年，
停顿：“错”
});
$（“#播放按钮”）。单击（函数（）{
$（'家庭旋转木马'）。旋转木马（'循环'）；
});
$（“#暂停按钮”）。单击（函数（）{
$（'家庭旋转木马'）。旋转木马（'暂停'）；
});
});
旋转木马按钮{
左边距：100px；
位置：绝对位置；
底部：0px；
}
.下一节{
宽度：100%；
高度：500px；
位置：相对位置；
背景颜色：蓝色；
z指数：100；
}
p{color:#FFF；}
.项目{
位置：固定；
}

引导3旋转木马布局
这是一个使用Bootstrap 3样式的carousel布局示例



对网格的更改
Bootstrap3仍然有一个12列的网格，但是许多CSS类名已经完全改变了


基于百分比的上浆
“移动优先”现在只有一个基于百分比的网格



我希望滑块在向下滚动时位于蓝色区域下方，蓝色包装需要覆盖整个滑块

旋转木马标题也需要在滑块上居中，不要“移动”！

我已使用背景img而不是img标记解决问题，并且我已应用背景附件：修复

<div class="carousel-inner" role="listbox">
          <div class="item  active slideimg1">
                <div class="carousel-caption">
                    <h1>Lorem ipsus</h1>
                    <p>Etiam tellus felis, fringilla vitae dictum id, dapibus id est.</p>
                </div>
          </div>
 </div>

---

我已经解决了使用背景img而不是img标签，我已经应用了背景附件：固定

<div class="carousel-inner" role="listbox">
          <div class="item  active slideimg1">
                <div class="carousel-caption">
                    <h1>Lorem ipsus</h1>
                    <p>Etiam tellus felis, fringilla vitae dictum id, dapibus id est.</p>
                </div>
          </div>
 </div>

---

请编辑问题并将代码张贴在里面（格式正确）。并描述你发布的代码有什么问题。我试过这么做，但它说我的帖子包含了太多的代码！您是否已简化为MCVE（请参阅）？@kebs我已添加了一个代码段请检查：）请编辑问题并将代码张贴在里面（格式正确）。并描述你发布的代码有什么问题。我试过这么做，但它说我的帖子包含了太多的代码！您是否已缩减为MCVE（请参阅）？@kebs我已添加了一个片段请检查：）