请帮忙。当我使用默认轮播时,
<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>
最佳答案
我看了你的代码,你的问题出在你的循环中
轮播一次只能有一个事件类的元素(如果你只想显示一个)
这不包含您必须构建循环以不添加事件类的 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;}
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" );
})
您可以查看 fiddle HERE
关于php - Bootstrap 3 动态轮播不滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39106124/