具有滑动背景、固定图像和滑动前景的轮播

Question

亲爱的开发者社区，你好，

我必须开发一个boostrap-4轮播，每张幻灯片都有一个背景图像（B）和一个文本（T），中间有一个固定图像（F），这样图像B就滑到了图像F后面，而文字T在图片F前面滑动。

我尝试使用 z-index 属性来做到这一点，但没有成功。这是我的 jsfiddle 示例：https://jsfiddle.net/4tvb6yuj/1/

这里是“轮播项目”的示例：

      <div class="carousel-item active">
        <img class="d-block w-100" src="...">
        <div style="z-index: 60" class="carousel-caption d-none d-block">
          <h5>(1) This text should <br/> 
              slide in front of  <br/> 
              the dog image</h5>
        </div>
      </div>

图像 F 放置在“carousel-inner”内部，任何“carousel-item”的外部和之后：

      <div style="position: relative; top: 30px; left:10px;">
        <img src="https://picsum.photos/id/237/120/180"/>
      </div>

谁能帮帮我？

Answer 1

据我所知，这是不可能的。您可以将整个 .carousel-item 堆叠在图像的前面或后面，但您不能将一项 (background-image) 放在后面，而将另一项 (text) 放在前面，因为这两个元素具有相同的父元素.

您必须更改标记和 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 轮播并创建我的定制轮播来移动两个容器。