Question

我有一个bootstrap轮播，目前使用wordpress高级自定义字段来填充它。在手动写入旋转木马指示器的那一刻。相反，我会根据幻灯片的数量来填充轮播指示器的数量。因此，如果有2张幻灯片，则在旋转木马指示器中有2个。

这是我的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>

Answer 1

基于代码的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 编号的输出列表项。

Php根据幻灯片的数量显示轮播指示器

1 个答案: