根据我的Bootstrap轮播的位置设置文本

Question

我正在尝试根据Bootstrap轮播的图像位置设置一些文本。换句话说，如果圆盘传送带正在显示第一个图像，而我想在其旁边显示一些说明性文本，如果圆盘传送带正在显示第二个图像，则它必须显示另一个说明性文本，它与图像幻灯片的编号相对应。 / p>

现在，我已经使用此HTML设置轮播和文本的位置：

<div class="row">
    <div id="carouselExampleIndicators" class="carousel slide col-7 px-0" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active" id="c-1">
                <img class="d-block" src="views\img\banner\boletos.jpg" alt="First slide" style="object-position: center; object-fit: cover; width: 100%; height: 500px;">
            </div>
            <div class="carousel-item" id="c-2">
                <img class="d-block" src="views\img\banner\concierto.png" alt="Second slide" style="object-position: center; object-fit: cover; width: 100%; height: 500px;">
            </div>
            <div class="carousel-item" id="c-3">
                <img class="d-block" src="views\img\banner/blog.jpg" alt="Third slide"  style="object-position: top; object-fit: cover; width: 100%; height: 500px;">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- End carousel -->
    <div class="caption-group col-5">
        <div class="carousel-caption active" style="color: #000000!important;" id="t-1">
            <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
        </div>
        <div class="carousel-caption" style="color: #000000!important;" id="t-2">
            <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
        </div>
        <div class="carousel-caption" style="color: #000000!important;" id="t-3">
            <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet</p>
        </div>
    </div>
</div>

和此CSS设置一些位置：

.carousel-caption {
    /*left:0;
    right:0;*/
    top: 50%;
    transform: translateY(-50%);    
    text-align:left;
    padding:15px;
    background:rgba(0,0,0, 0);
    text-shadow:none;
}

.caption-group {
    position:relative;
    top:0;
    right:0;
}
.list-group-item {
    border-radius:0px;
    cursor:pointer;
}
.list-group-item .active {
    background-color:#eee;  
}

@media (min-width: 992px) { 
    #myCarousel {padding-right:33.3333%;}
    #myCarousel .carousel-controls {display:none;}  
}
@media (max-width: 991px) { 
    .carousel-caption p {display:none;} 
}

我认为可以使用一些Javascript代码来实现，但是我不知道如何。