引导视频轮播播放按钮/左右指示器未出现

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>

Answer 2

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

此外，您还仅在其中一个元素上设置了类“d-none d-md-block”，这充其量是不一致的。 您可能想研究 Bootstrap 在轮播中使用对齐方式 https://getbootstrap.com/docs/4.1/components/carousel/#slides-only 他们使用 'd-block' (class="d-block w-100") 应用于示例中的所有元素。

尚未测试，但可能就是这样。

Answer 3

问题解决了吗？我也面临类似的问题，但在我的情况下，只有视频播放按钮不起作用。起初是因为上一个和下一个按钮，当我尝试按播放按钮时，它正在更改幻灯片，然后我更改了上一个和下一个按钮的位置，但视频播放按钮仍然不起作用

<div id="videoCarousel">
    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel" >
      <div class="carousel-inner">
        <div class="carousel-item active">
          <video width="640" height="360" class="d-block w-100"  controls playsinline="playsinline">
            <source src="./assets/HotelView.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
        <div class="carousel-item">
          <video width="640" height="360"  class="d-block w-100" controls playsinline="playsinline">
            <source src="./assets/HotelView.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
        <div class="carousel-item">
          <video width="640" height="360"  class="d-block w-100" controls playsinline="playsinline">
            <source src="./assets/HotelView.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>