如何创建iframe的引导轮播？ [英] How to create this bootstrap carousel of iframes?

问题描述

我可以使用Bootstrap来创建视频（iframe）的轮播，其布局如下所示：

我目前使用的代码如下。问题是：

• 轮播指示符显示在视频顶部（使其难以看到），而不是在下面。 / li>
  

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

   < div id =carouselvideoclass =轮播幻灯片data-ride =carousel> 
  < ol class =carousel-indicators> 
  < li data-target =＃carouselvideodata-slide-to =0class =active>< / li> 
  < li data-target =＃carouselvideodata-slide-to =1>< / li> 
  < li data-target =＃carouselvideodata-slide-to =2>< / li> 
  < / ol> 
   
  < div class =carousel-innerrole =listbox> 
  < div class =item active> 
  < iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0frameborder =0 allowfullscreen>< / iframe> 
  < / div> 
  < div class =item> 
  < iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0frameborder =0 allowfullscreen>< / iframe> 
  < / div> 
  < div class =item> 
  < iframe width =250height =250src =https://www.youtube-nocookie.com/embed/xxx?rel=0&amp;showinfo=0frameborder =0 allowfullscreen>< / iframe> 
  < / div> 
  < / div> 
  < / div> 
    

解决方案

是的，你可以做你要的。只需移动：

 < ol class =carousel-indicators> 
< li data-target =＃carouselvideodata-slide-to =0class =active>< / li> 
< li data-target =＃carouselvideodata-slide-to =1>< / li> 
< li data-target =＃carouselvideodata-slide-to =2>< / li> 
< / ol> < div id =carouselvideo>      code>容器。只要 data-target 指向 #carouselvideo ， ol 可以在页面上的任何位置。
 
 
 
对于JS，您可以将 interval   false  
 
 
 
  $（＃carouselvideo）。carousel（{interval：false} ）;  
 
Can I use Bootstrap to create a carousel of video's (iframe's) with the layout as below?



The code that I'm currently using is below. The problem is that:


the carousel indicators are displayed on top of the video (makes them hard to see) instead of below it.
the carousel automatically goes to the next video after a few seconds. Instead I would like the carousel to only go to the next video if the visitor clicks on the carousel indicator.
<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>


解决方案
Yes, you can do what you are asking. Simply move this:
<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>
Out of the <div id="carouselvideo"> container. As long as the data-target points to #carouselvideo, the ol can be anywhere on your page.

For the JS, you would set the option for interval to false

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

                        
这篇关于如何创建iframe的引导轮播？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！