Question

我正在尝试在Wordpress中使用Bootstrap轮播，所以我需要一个循环。但是，滑块脚本要求第一张幻灯片有一个特殊的类，并且无法计算如何将该类应用于循环的第一次迭代而只能应用于它（事实上，当旋转木马是旋转木马时，类将在整个幻灯片中旋转工作，但html需要首先滑动active类，然后所有其他幻灯片没有该类。）

到目前为止，这是我的代码：

<div id="myCarousel" class="carousel slide">
    <!-- 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>
    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <?php if( have_rows('slide') ): ?>
        <?php while( have_rows('slide') ): the_row();
        // vars
        $img = get_sub_field('slide_image');
        $desc = get_sub_field('slide_text');
        $title = get_sub_field('slide_title');
        $url = $img['url'];
        $size = 'slider';
        $thumb = $gal['sizes'][ $size ];
        ?>
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>

            <div class="carousel-caption">
            <h2><?php echo $title; ?></h2>
            <div class="desc"><?php echo $desc; ?></div>
            </div>
        </div>
        <?php endwhile;?>               
        <?php endif;?>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</div>

供参考，原始的纯HTML代码位于https://github.com/IronSummitMedia/startbootstrap/blob/gh-pages/templates/half-slider/index.html

所以，简而言之，我需要的是这条线：

<div class="item active">

只有一次，但所有其他迭代应该是

<div class="item">

这就像How to put an class on specific (first element) inside loop?，只有在PHP和WordPress中，我试着按照这个答案但是无法理解

任何帮助真的很感激

Answer 1

如果您只想要一次出现，只需使用$i变量。

<?php
// This sets the value to 0
$i = 0;
while( have_rows('slide') ): the_row();
        // vars
        $img = get_sub_field('slide_image');
        $desc = get_sub_field('slide_text');
        $title = get_sub_field('slide_title');
        $url = $img['url'];
        $size = 'slider';
        $thumb = $gal['sizes'][ $size ];
        ?>
        <!-------------------------------->
        <!-- THIS $i checks if equals 0 -->
        <!-------------------------------->
        <div class="item<?php if($i==0) { ?> active<?php } ?>">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background:url('<?php echo $img; ?>') no-repeat; background-size:cover;"></div>

            <div class="carousel-caption">
            <h2><?php echo $title; ?></h2>
            <div class="desc"><?php echo $desc; ?></div>
            </div>
        </div>
        <?php
        // This will increment $i so $i should not 
        // equal 0 except on the first loop
        $i++;
endwhile; ?>

Answer 2

您可以使用$wp_query->current_post获取The Loop中的索引位置，然后仅在$wp_query->current_post == 0

时打印出“有效”

编辑：意识到你说“循环”而不是“循环”，你可以使用变量和if语句来检查它是否是循环的第一次迭代。 < / p>

$show_active = true;
while( have_rows('slide') ): the_row();
    if ( $show_active ){
        $active = 'active';
        $show_active = false;
    } else {
        $active = '';
    }
endwhile;

Answer 3

我用过：

<div class="carousel-inner">
    @foreach($banners as $banner)
    <div class="carousel-item @if($banner->id == 1) active @endif">
        <img class="d-block w-100" src="{{ Storage::disk('local')->url($banner->image) }}" alt="{{ $banner->title }}">
        <div class="carousel-caption d-none d-md-block">
            <h1>{{ $banner->title }}</h1>
            <p>{{ $banner->body }}</p>
        </div>
    </div>
    @endforeach
</div>

像微风一样工作！

如何在循环中只将一个类应用一次？

3 个答案: