Bootstrap 3动态轮播不滑动答案

【问题标题】：Bootstrap 3 dynamic carousel doesnt slideBootstrap 3动态轮播不滑动
【发布时间】：2016-12-30 13:47:20
【问题描述】：

请帮忙。当我使用默认轮播时，

<div class="carousel-inner" role="listbox">
<div class="item active">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>
<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>
...

幻灯片确实有效，但是当我循环播放时 <div class="item active">...</div> 所以图像将是动态的，它不再滑动了。相反，图像只是相互堆叠，如下所示： image here 这是我的代码：

          <!-- carousel -->
    <div id="myCarousel" class="carousel slide " data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <?php 
        $x = new DB();
        $y= $x->selectWithCount(0,'tblimagecarousel',null,null);
        // var_dump($y);
        $numofimages = $y->fetchColumn();
        // echo $numofimages;
        for($x=0;$x<$numofimages;$x++)
        {
          echo "<li data-target='#myCarousel' data-slide-to='{$x}'></li>";
        }
       ?>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
    <?php 
      $x = new DB();
      $y= $x->select(0,'*','tblimagecarousel',null,null);

      while($row = $y->fetchObject()){
        echo"
        <div class='item active'>
        <img src='../assets/images/".$row->img."' alt='".$row->title."' width='100%' height='345'>
        <div class='carousel-caption'>
          <h3>".$row->title."</h3> 
          <p>".$row->description."</p>
        </div>
        </div>";

      }
    ?>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" >
      <span><img src="../assets/images/ico_prev.png" height="50px" style="margin-top:500%"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span><img src="../assets/images/ico_next.png" height="50px" style="margin-top:500%"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

【问题讨论】：

粘贴你渲染的 HTML 也许我们可以帮助看看发生了什么
io 认为我看到了问题（我还没有测试过），但是活动类不能应用于所有 DIV 删除它，看看是否有帮助。生成它们后，将活动类添加到其中之一，您可能必须调用 $('.carousel').carousel() 函数
在进一步检查您的代码之后......您可能只想进行一次 db 调用并将所有内容提取到一个数组中，然后您将在一个地方获得所需的所有信息。您的数据库调用是否获取预期结果？
是的，我在 db call fetch 中没有问题，因为我得到了我预期的图像结果。所以你认为问题在于数据目标 li 中的活动？
如果从循环中删除活动类会发生什么。也许只将它添加到最后一项？

标签： php html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我查看了您的代码，您的问题在于您的循环

轮播一次只能有一个活动班级的项目（如果您只想显示一个）

这不包含您必须构建循环以不添加活动类的 php 部分（可能将活动类添加到之后的第一项）

HTML

    <div class="item">
      <img src="../assets/images/image1.png" alt="Image one" width="100%" height="345">
      <div class="carousel-caption">
        <h3>Image one</h3>
        <p>Image Description 1</p>
      </div>
    </div>
    <div class="item">
      <img src="../assets/images/image2.png" alt="Image two" width="100%" height="345">
      <div class="carousel-caption">
        <h3>Image two</h3>
        <p>Image Description 2</p>
      </div>
    </div>
    <div class="item">
      <img src="../assets/images/image3.png" alt="Image three" width="100%" height="345">
      <div class="carousel-caption">
        <h3>Image three</h3>
        <p>Image Description 3</p>
      </div>
    </div>
    <div class="item">
      <img src="../assets/images/image4.png" alt="Image four" width="100%" height="345">
      <div class="carousel-caption">
        <h3>Image four</h3>
        <p>Image Description 4</p>
      </div>
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span><img src="../assets/images/ico_prev.png" height="50px" ></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span><img src="../assets/images/ico_next.png" height="50px" ></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

    body{background-color:#ccc;}
.item{height:400px;}

$(document).ready(function(){
  $('#myCarousel').carousel();
 //this will add the active class to the first item
  $('.carousel-inner div.item:first-of-type' ).addClass( "active" );
})

您可以查看小提琴HERE

【讨论】：