一页上有多个bootstrap轮播,只能控制一个

Question

我在视图中一次加载动态数量的轮播,但我只能滚动渲染的第一个轮播.如何控制所有加载的？只能一次查看一个旋转木马,其他旋转木马是隐藏的.

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
});

HTML:

<div class="draft posts" id="draft_1"><div class='container'>
  <div class='col-md-12'>
    <div class='carousel slide' id='myCarousel'>
      <div class='carousel-inner'>
        <div class='item active'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Revised
              </div>
              <div class='view-draft-title'>

                        <h2>I'm editing htis draft</h2>
                      <p contenteditable="true"> </p>
              </div>
              <div class='view-draft-body'>

                        <h2>I'm editing htis draft</h2>
                      <p contenteditable="true"> </p>
              </div>
            </div>
          </div>
        </div>
        <div class='item'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Original
              </div>
              <div class='view-draft-title'>
                <h1>This is Tsteting new draft</h1>
              </div>
              <div class='view-draft-body'>
                <h2>Click to W<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;">$('#post-body textarea').val(content)&nbsp;</span><span style="line-height: 1.1;">&nbsp;editing</span></h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-left'></i>
    </a>
    <a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-right'></i>
    </a>
  </div>
</div>
</div>
<div class="draft posts" id="draft_2"><div class='container'>
  <div class='col-md-12'>
    <div class='carousel slide' id='myCarousel'>
      <div class='carousel-inner'>
        <div class='item active'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Revised
              </div>
              <div class='view-draft-title'>

                        <h2>Draft 2 After edit</h2>
              </div>
              <div class='view-draft-body'>

                        <h2>Draft 2 After edit</h2>
              </div>
            </div>
          </div>
        </div>
        <div class='item'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Original
              </div>
              <div class='view-draft-title'>
                <h1>Number 2</h1>
              </div>
              <div class='view-draft-body'>
                <h2>Draft 2 before edit</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-left'></i>
    </a>
    <a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-right'></i>

Answer 1

你有两个id为#myCarousel的旋转木马.

其中一个应该更改为不同的ID(例如#carousel2).然后应将相关控件更新为href ="#carousel2"

通常,每页只能使用一次ID.