引导视频轮播播放按钮/左,右指标未出现(Bootstrap Video Carousel Play

2019-09-30 21:07发布

所以我想有一个与它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:

约翰是关于正确的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:

在引导4.x版(最新)个人转盘要素类不是“项目”这是“旋转木马项目”。

您还设置了一个类上是不一致的最好的元素只有一个“d-没有d-MD-块”。 你可能要考虑在传送带白手起家利用对齐https://getbootstrap.com/docs/4.1/components/carousel/#slides-only ,他们用“d-块”(类=“d块W- 100" )上的例子的所有元素。

没有测试,但是这可能是它。



文章来源: Bootstrap Video Carousel Play button/ left & right indicators not appearing