Bootstrap Video Carousel Кнопка Play / левый и правый индикаторы не отображаются

Question

Итак, я пытаюсь создать карусель с четырьмя видео, и у меня возникли некоторые проблемы, и я не могу понять, почему. Прежде всего, я могу переключать видео только с помощью кружков в нижней средней части экрана, я не могу нажимать на левую или правую или видео для переключения. Когда я переключаюсь, перемещение влево работает нормально, но когда я иду вправо, появляется кнопка воспроизведения там, где должен быть левый индикатор, а когда я играю в видео, он возвращается в середину. Любая помощь будет принята с благодарностью, так как я здесь довольно тупой Вот мой код Заранее спасибо.

<div id="help--video-help-carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#help--video-help-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="1"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="2"></li>
            <li data-target="#help--video-help-carousel" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <video width="900" height="600" border="5" controls="controls">
                    <source src="help1.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 1</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help2.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 2y</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help3.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 3</h3>
                </div>
            </div>
            <div class="item">
                <video width="900" height="600" controls="controls">
                    <source src="help4.mp4" type="video/mp4">
                </video>
                <div class="carousel-caption d-none d-md-block">
                </div>
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Help 4</h3>
                </div>
            </div>
            <a class="carousel-control-prev" href="#help--video-help-carousel" 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="#help--video-help-carousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

Answer 1

Йохан был прав насчет item, который должен быть carousel-item. Это исправило код для меня. Кроме того, заверните карусель в контейнер, кажется, исправить элементы управления. Вы также можете добавить нижнее поле для элементов управления, подписей и индикаторов.

<div class="container-fluid col-8 offset-2">
<div id="help--video-help-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators" style="margin-bottom: 60px;">
        <li data-target="#help--video-help-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="1"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="2"></li>
        <li data-target="#help--video-help-carousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <video width="900" height="600" border="5" controls="controls">
                <source src="help1.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 1</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help2.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 2y</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help3.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 3</h3>
            </div>
        </div>
        <div class="carousel-item">
            <video width="900" height="600" controls="controls">
                <source src="help4.mp4" type="video/mp4">
            </video>
            <div class="carousel-caption d-none d-md-block" style="margin-bottom: 60px;">
                <h3 class="h3-responsive">Help 4</h3>
            </div>
        </div>
        <a class="carousel-control-prev" href="#help--video-help-carousel" role="button" data-slide="prev" style="margin-bottom: 60px;">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#help--video-help-carousel" role="button" data-slide="next" style="margin-bottom: 60px;">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Снимок экрана с каруселью

Answer 2

В Bootstrap v4.x (последняя версия) отдельный класс элементов карусели - это не «элемент», а «элемент карусели».

Также вы установили класс 'd-none d-md-block' только для одного из элементов, который в лучшем случае несовместим. Возможно, вы захотите взглянуть на использование Bootstraps выравнивания в карусели https://getbootstrap.com/docs/4.1/components/carousel/#slides-only, где они используют 'd-block' (class = "d-block w-100") для всех элементов в примере.

Не проверял, но это может быть так.