Bootstrap 4：如何同时滑动两个项目？还是同步两个滑块？

Question

我为移动设备和台式机设置了自定义的Bootstrap 4轮播，其中每个元素都由图片和包含图片信息的块组成：

    <section class="achievements" id="achievements">
        <div class="container">
        <div class="slider carousel slide" data-ride="carousel" id="slider">
            <div class="container">
                <div class="row no-gutters">
                    <div class="col-1 d-flex align-items-center left-arrow carousel-control-prev"><a href="#slider"
                                                                                                     class="carousel-control-prev"
                                                                                                     data-slide="prev"><img
                                src="img/arrow.png'"
                                class="img-fluid first-arrow arrow"
                                id="prev-arrow"/></a></div>
                    <div class="col-10 d-flex justify-content-center slider-container">
                        <div class="carousel-item active slider-element" style="background-image:url(/img/1.jpg';">
                            <div class="slider-info"><span class="slider-info-title text-uppercase">Some informations
                            </div>
                        </div>
                    </div>
                    <div class="col-1 d-flex justify-content-end align-items-center carousel-inner"><a href="#slider"
                                                                                                       class="carousel-control-next"
                                                                                                       data-slide="next">
                            <img
                                src="{{asset('img/arrow.png')}}" class="img-fluid arrow"
                                id="next-arrow"/></a></div>
                </div>
            </div>
        </div>
        </div>
    </section>

使用此CSS：

.achievements {
    padding-top: 40px;

    h3 {
        color: $green;
        border-bottom: solid 5px $yellow;
        padding-bottom: 5px;
    }

    .slider {
        background: $green;
        padding: 30px 0;
        margin-top: 40px;
        height: 520px;
    }

    .slider-info {
        background: $grey-slider;
        color: $black;
        padding: 5px;
        font-size: 0.7rem;
        position: relative;
        margin-top: 420px;
    }

    .slider-info-title {
        color: $green;
        display: block;
    }

    .first-arrow {
        transform: rotate(180deg);
    }

    .arrow {
        width: 10px;
        cursor: pointer;
        z-index: 1030;
    }

    p {
        padding: 10px 0;
    }

    .slider-element{
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position-x: center !important;
        background-position-y: center !important;
        width: inherit;
        height: inherit;
    }

    .slider-container{
        height : 400px;
        overflow: hidden;
    }

    .carousel-control-next, .carousel-control-prev{
        position: relative;
    }

旋转木马正在工作，但是我遇到了溢出问题，因为我看到了整个动画。 如果我在 .slider-container 上放置了 overflow：hidden 属性，则仅显示图片。 因此，我想知道是否存在另一种同时滑动两个项目的方法，或者是否可能有两个滑块并仅通过第一个转盘上的控件同时移动它们。

谢谢