jcarousel元素的响应和对齐

Question

我正在研究基于轮播的布局。我正在使用html5，css3（boostrap 4），jquery和js。所需的输出如下：

我已经尝试使用Jcarousel响应式示例进行工作。目前，我正在md屏幕（笔记本电脑）上工作。我被困在一个问题上

1. 内部元素的对齐方式（文字叠加层和图像）
2. 此外，在响应性方面。

这是原始的[响应式轮播]   （https://sorgalla.com/jcarousel/examples/responsive/）！ 其余的CSS和JS代码。

我尝试使用绝对定位，但它会降低响应速度。尽管图像和文本位于同一div上，但图像和文本仍未对齐。

这是我的html代码。我缩短了代码，因此，您只会看到第一行列表，其中包含2张并排放置的图像。

        <div class="jcarousel">
            <ul>
                  <li>
                    <div class="item ">
                      <div class="row">
                        <div class="col-md-6 ">
                          <div class="overlay">
                           <img src="jcarousel/images/image1.jpg" class="left-img" alt="Image 1">
                           <p class="p-left">Text Header overlay</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="overlay">
                           <img src="jcarousel/images/image2.jpg" class="right-img" alt="Image 2">
                           <p class="p-right">Text Header overlay</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>               
            </ul>
        </div>

        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
        <a href="#" class="jcarousel-control-next">&rsaquo;</a>

</div>

这是内部元素的css，即段落和图像元素。

.jcarousel img {
    display: block;
    max-width: 100%;

    height: auto !important;
}

.right-img{
    position: absolute;
        left: -50px;
}
.left-img{
    position: absolute;
    left: 50px;
}

.overlay{
     position: relative; 
   width: 100%;

}

.p-right{
    position: absolute;
    top: 190px;
    left: -50px;
    width:100%;
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; 
}


.p-left{
    position: absolute;
    top: 190px;
    left: 50px;
    width:100%;

    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; 
}