我可以使用 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&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&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&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});
关于javascript - 如何创建 iframe 的这个 bootstrap carousel?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34121547/