Rid*_*dle 0 wordpress carousel twitter-bootstrap-3 advanced-custom-fields
我在Bootstrap/WP中有一个旋转木马工作正常,但是当添加更多"幻灯片"时,不会创建轮播指示器."幻灯片"是从ACF中提取的文本字段.如何使旋转木马指示器动态,以便每增加一个新的ACF条目?
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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><h1>Testimonials</h1>
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('testimonials') ){
//loop through
while ( have_rows('testimonials') ){
//define the row
the_row();
?>
<div class="item
<?php if ($count==0) {echo "active";} ?>"
>
<div class="container">
<div class="carousel-caption">
<p><?php the_sub_field('testimony') ?></p>
<p><?php the_sub_field('name') ?></p>
</div>
</div>
</div>
<?php
$count=$count+1;
}
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Run Code Online (Sandbox Code Playgroud)
小智 6
我通常也只是遍历指标.
<?php if( have_rows('testimonials') ): $i = 0; ?>
<ol class="carousel-indicators">
<?php while ( have_rows('testimonials') ): the_row(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
<?php $i++; endwhile; ?>
</ol>
<?php endif; ?>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2960 次 |
| 最近记录: |