Javascript 带滑动背景、固定图像和滑动前景的旋转木马

你好，亲爱的dev社区

我必须开发一个带有背景图像（B）和一个文本（T）的BooStRAP-4旋转木马，中间有一个固定的图像（F），以便图像B在图像F后面滑动，而文本T在图像F.

前滑动。 我尝试使用z-index属性来实现它，但没有成功。下面是我的JSFIDLE示例：

这里是一个“转盘项目”的示例：

（1） 此文本应

在前面滑动

狗的形象

图像F放置在任何“旋转木马项目”的“旋转木马项目”内部、外部和后面：

---

有人能帮我吗？

据我所知，这是不可能的。您可以将整个

.carousel项目

堆叠在图像前面或后面，但不能将一个项目（

背景图像

）放在后面，而将另一个项目（

文本

）放在前面，因为这两个元素具有相同的父元素

您必须更改标记和JavaScript以拥有两个移动的容器

<div>
    <div class="background-image"></div><!-- this will get moved by javascript -->
    <div class="dog-image"></div><!-- this is static -->
    <div class="text"></div><!-- this will get moved by javascript -->
</div>

---

最好改变一下设计。如果我真的需要实现这一点，我可能不会使用Bootstrap carousel并创建我的定制carousel来移动两个容器。

事实上，这正是我所担心的，只是我需要在这一领域有更多经验的人的确认。因此，我将尝试使用此解决方案。你知道类似的例子吗？再次感谢你的帮助对不起，我没有可以给你看的例子。几年前我创建了一个类似的东西，在一些浏览器中出现了一些闪烁问题。如果无法使用尽可能多的浏览器更改设计测试。如果你有问题，发布你的代码，我会尽力帮助你。没问题。顾客改变了主意。非常感谢你

<div>
    <div class="background-image"></div><!-- this will get moved by javascript -->
    <div class="dog-image"></div><!-- this is static -->
    <div class="text"></div><!-- this will get moved by javascript -->
</div>