如何创建此iframe引导轮播？

Nick 发表于 Dev

缺口

我可以使用Bootstrap创建具有以下布局的视频（iframe）轮播吗？

我当前正在使用的代码如下。问题是：

轮播指示器显示在视频顶部（难以观看），而不是显示在视频底部。

轮播会在几秒钟后自动转到下一个视频。相反，如果访问者单击轮播指示器，我希望轮播仅转到下一个视频。

<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指向#carouselvideo，ol都可以在页面上的任何位置。

对于JS，你会设置的选项interval，以false

$("#carouselvideo").carousel({interval: false});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。