我正在尝试制作循环,但结果不正确。
以下是滑块的完整代码:gist.github.com
<div class="container">
<div class="row">
<div class="well">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide11">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide12">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide13">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide14">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide21">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide22">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide23">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide24">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide31">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide32">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide33">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/300x200/" alt="Slide34">
<div class="caption">
<h3>Product label</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<p><a href="#" class="btn btn-primary" role="button">12,99 €</a> <a href="#" class="btn btn-default" role="button">Wishlist</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div><!-- End Carousel -->
</div><!-- End Well -->
</div>