Javascript 如何创建iFrame的引导旋转木马?

Javascript 如何创建iFrame的引导旋转木马?,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我可以使用引导创建具有如下布局的视频(iframe)旋转木马吗 下面是我当前使用的代码。问题在于: 转盘指示器显示在视频的顶部(使其难以看到),而不是下方 转盘在几秒钟后自动转到下一个视频。相反,我希望旋转木马只有在访客点击旋转木马指示器时才能转到下一个视频 <div id="carouselvideo" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators">

我可以使用引导创建具有如下布局的视频(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>

  • 容器中取出。只要
    数据目标
    指向
    #carouselvideo
    ,则
    ol
    可以位于页面上的任何位置

    对于JS,您可以将
    interval
    的选项设置为
    false


    $(“#carouselvideo”).carousel({interval:false})

    谢谢,它工作时只有一个例外。把指示器代码放在旋转木马外面,似乎会引起一些问题:啊,是的。我忘了当控件在外面的时候你需要一点js。不过,看起来你已经弄明白了。