Question

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

<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>

Answer 1

我看了你的代码，你的问题在你的循环中

轮播一次只能有一个活动类的项目（如果你只想展示一个）

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

<强> 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;}

<强> JS

$(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

Bootstrap 3动态旋转木马不会滑动

1 个答案: