первый пост в то время как цикл WordPress

Question

первый пост в то время как цикл WordPress

Я пытаюсь создать загрузочную карусель в WordPress, используя расширенные настраиваемые поля.

Первый «элемент карусели» в цикле должен иметь класс «активный». Я не могу понять, как определить условие if, чтобы класс был добавлен в первую итерацию цикла.

То же самое и в случае с карусельными индикаторами.
Класс active должен быть добавлен к первой итерации, а data-slide-to = «x» должен быть счетчиком цикла. Есть идеи, как заставить работать счет и класс?

<section>
<div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">
<?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
<?php while( $loop->have_posts() ): $loop->the_post(); ?>
<div class="carousel-item" style="background-image: url('<?php the_field('carousel_image'); ?>')">
<div class="carousel-caption d-none d-md-block">
<h3><?php the_title(); ?></h3>
<p><?php the_field('carousel_description'); ?></p>
</div>
</div>
<?php endwhile; wp_reset_query();?>
</div>

<a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

1

advanced-custom-fields bootstrap-4 php twitter-bootstrap wordpress

Решение

Другие решения

Вот как я это реализовал.
Определены две переменные. Один для индикатора карусели, другой для обертки карусели и увеличивайте их в цикле.

$ carousel_wrap = 0;
$ carousel_ind = 0;

<section>
<div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
<?php while( $loop->have_posts() ): $loop->the_post(); $carousel_ind++; ?>
<li data-target="#theCarousel" data-slide-to="<?php echo $carousel_ind; ?>" class="<?php if( $carousel_ind == 1 ) echo 'active' ?>""></li>
<?php endwhile; wp_reset_query();?>
</ol>

<div class="carousel-inner" role="listbox">
<?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
<?php while( $loop->have_posts() ): $loop->the_post(); $carousel_wrap++; ?>
<div class="carousel-item <?php if( $carousel_wrap == 1 ) echo 'active' ?>" style="background-image: url('<?php the_field('carousel_image'); ?>')">
<div class="carousel-caption d-none d-md-block">
<h3><?php the_title(); ?></h3>
<p><?php the_field('carousel_description'); ?></p>
</div>
</div>
<?php endwhile; wp_reset_query();?>
</div>

<a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

0

Источник

Accepted Answer

Вы можете сделать это так

      <div class="carousel-inner" role="listbox">
<?php
$iteration = 0;
$loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
<?php while( $loop->have_posts() ): $loop->the_post(); $iteration++; ?>
<div class="carousel-item<?php if( $iteration == 1 ) echo ' active' ?>" style="background-image: url('<?php the_field('carousel_image'); ?>')" data-slide-to="<?php echo $iteration ?>">
<div class="carousel-caption d-none d-md-block">
<h3><?php the_title(); ?></h3>
<p><?php the_field('carousel_description'); ?></p>
</div>
</div>
<?php endwhile; wp_reset_query();?>
</div>

<a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

1