我可以使用 Bootstrap 创建具有如下布局的视频 (iframe) 轮播吗?

javascript - 如何创建 iframe 的这个 bootstrap carousel?-LMLPHP

我目前使用的代码如下。问题在于:

  • 轮播指示器显示在视频顶部(使它们难以看到)而不是视频下方。
  • 轮播会在几秒钟后自动转到下一个视频。相反,如果访问者单击轮播指示器,我希望轮播仅转到下一个视频。
    <div id="carouselvideo" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
        <li data-target="#carouselvideo" data-slide-to="1"></li>
        <li data-target="#carouselvideo" data-slide-to="2"></li>
      </ol>
    
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>
    
  • 最佳答案

    是的,你可以做你所要求的。只需移动这个:

    <ol class="carousel-indicators">
        <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
        <li data-target="#carouselvideo" data-slide-to="1"></li>
        <li data-target="#carouselvideo" data-slide-to="2"></li>
      </ol>
    

    <div id="carouselvideo"> 容器。只要 data-target 指向 #carouselvideool 就可以位于页面上的任何位置。

    对于 JS,您可以将 interval 的选项设置为 false$("#carouselvideo").carousel({interval: false});

    关于javascript - 如何创建 iframe 的这个 bootstrap carousel?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34121547/

    10-12 13:05
    查看更多