Question

因此，我正在尝试制作一个带有4个视频的轮播，但出现了一些问题，无法理解原因。首先，我只能使用屏幕底部中间的圆圈来切换视频，不能单击左侧或右侧或视频来切换。当我确实切换时，向左移动效果很好，但是当我向右移动时，播放按钮出现在左侧指示器应位于的位置，并且当我播放视频时，它会弹出回到中间。任何帮助将不胜感激，因为我在这里很困惑。这是我的代码。预先感谢。

<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

Johan认为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>

Screenshot of carousel

Answer 2

在Bootstrap v4.x（最新）中，各个轮播元素元素类不是“ item”，而是“ carousel-item”。

此外，您还只是在一个充其量是不一致的元素上设置了“ d-none d-md-block”类。您可能想在转盘https://getbootstrap.com/docs/4.1/components/carousel/#slides-only中使用Bootstraps对齐方式，在示例中，Bootstrap在所有元素上使用'd-block'（class =“ d-block w-100”）。

还没有测试过，也许就是这样。

Bootstrap Video Carousel Play按钮/左右指示器不出现

2 个答案: