我有一个bootstrap carousel，目前使用wordpress高级自定义字段来填充它。目前，旋转木马指示器是手动编写的。相反，我会将旋转木马指示器的数量填充为幻灯片的数量。如果有两张幻灯片那么旋转木马指示器中就有两个li
这是我的php:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $i = 0; ?>
<?php while(has_sub_field('carousel')): ?>
<div class="item <?php if($i === 0) { ?> active <?php } ?>">
<img src="<?php the_sub_field('carousel_image'); ?>" alt="...">
<div id="carouselLogo"><img src="<?php the_sub_field('carousel_logo'); ?>" alt="..."></div>
</div>
<?php ++$i; ?>
<?php endwhile; ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
</a>
</div>
基于while(has_sub_field('carousel')):部分的代码，我假设你有一个数组，你已经存储幻灯片数据-在下面的示例代码中，我已经命名它$slides。
<?php
// Get slides and save them to array
// for example $slides = array();
// Open carousel wrapper
$output .= '<ol class="carousel-indicators">';
// Define slide No variable
// Bootstrap list begins with slide No 0, so we start slide numbering with 0
static $SlNo = 0;
// Foreach slide, output list item
foreach ($slides as $slide) {
if ($SlNo == 0 ) {
// Add class 'active' to first list item
$output .= '<li data-target="#myCarousel" data-slide-to="' . $SlNo . '" class="active"></li>';
} else {
// Output for rest of list items
$output .= '<li data-target="#myCarousel" data-slide-to="' . $SlNo . '" class=""></li>';
};
// Add +1 to slide No
$SlNo++;
};
// Close carousel wrapper
$output .= '</ol>'n';
// Return and echo output
return $output;
echo $output;
?>
使用下面的代码，我们为$slides数组中的每个幻灯片项创建带有data-slide-to数字的输出列表项。