我正在使用Bootstrap 4创建一个轮播，该轮播可以通过一个卡片组滑动，每个卡片组有3张卡片。我创建了两个查询，一个查询使用活动类设置第一个幻灯片，第二个查询应该创建另外两个幻灯片。因为我使用的是Wordpress，所以我使用了内置循环来创建查询，然后将第二个查询偏移3个项目。在第二个查询中，我使用了一个计数器来插入必要的结束div，并使用新的开始div来创建新的幻灯片。
我的问题是，因为查询返回所有匹配的可用项目，然后执行偏移量，所以计数器在第二个查询中看到所有9个项目，最后我得到了一张空白幻灯片。我不确定如何解决此问题。
这是我当前的查询
<div id="mpcarousellarge" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
<?php
$args = array(
'post_type' => 'paradisepizzas',
'post_status' => 'future,publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'pizzatypes',
'field' => 'slug',
'terms' => 'specialtypizzas',
),
),
'posts_per_page' => 3,
'orderby' => 'id',
'order' => 'ASC',
);
$paradisepizzas_query = null;
$paradisepizzas_query = new WP_Query ($args);
if ( $paradisepizzas_query->have_posts() ) : while ( $paradisepizzas_query->have_posts() ) : $paradisepizzas_query->the_post();
?>
<div class="card border border-dark cardheight">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?>
<img class="card-img-top m-auto" src="<?php echo $image[0]; ?>" alt="<?php echo $image[0]; ?>" />
<?php endif; ?>
<div class="card-body card-text text-center">
<?php the_content(); ?>
</div>
<div class="card-footer bg-dark text-light">
<h5 class="pizzafoot"><?php the_title(); ?></h5>
</div>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
<?php
$args = array(
'post_type' => 'paradisepizzas',
'post_status' => 'future,publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'pizzatypes',
'field' => 'slug',
'terms' => 'specialtypizzas',
),
),
'posts_per_page' => 99,
'offset' => 3,
'orderby' => 'id',
'order' => 'ASC',
);
$paradisepizzas2_query = null;
$paradisepizzas2_query = new WP_Query ($args);
$rowCount = 0;
if ( $paradisepizzas2_query->have_posts() ) : while ( $paradisepizzas2_query->have_posts() ) : $paradisepizzas2_query->the_post();
?>
<div class="card border border-dark cardheight">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?>
<img class="card-img-top m-auto" src="<?php echo $image[0]; ?>" alt="<?php echo $image[0]; ?>" />
<?php endif; ?>
<div class="card-body card-text text-center">
<?php the_content(); ?>
</div>
<div class="card-footer bg-dark text-light">
<h5 class="pizzafoot"><?php the_title(); ?></h5>
</div>
</div>
<?php
$rowCount++;
if($rowCount % 3 == 0) {echo '</div></div><div class="carousel-item"><div class="card-deck">';}
endwhile;
endif;
wp_reset_query();
?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="container">
<div class="row">
<div class="col">
<ol class="carousel-indicators" style="position: relative!important;">
<li data-target="#mpcarousellarge" data-slide-to="0" class="active"></li>
<?php
$args = array(
'post_type' => 'paradisepizzas',
'post_status' => 'future,publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'pizzatypes',
'field' => 'slug',
'terms' => 'specialtypizzas',
),
),
'posts_per_page' => -1,
'orderby' => 'id',
'order' => 'ASC',
);
$mpclg_query = null;
$mpclg_query = new WP_Query ($args);
$num = $mpclg_query->found_posts;
$OffsetItems = $num - 3;
$PostPerSlide = 3;
$SlideCount = $OffsetItems/$PostPerSlide;
$mpc = 1;
?>
<?php if ( $mpclg_query->have_posts() ): ?>
<?php while ( $mpclg_query->have_posts() ) : $mpclg_query->the_post(); ?>
<?php while ($mpc <= $SlideCount) {
print '<li data-target="#mpcarousellarge" data-slide-to="';
echo $mpc;
print '"></li>';
$mpc++;
}
?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
找到了一种更好的方法来使用Jquery。
我更改了我的PHP代码以包括一个计数器，并立即抓取了所有项目。使用计数器，当整数为1时，我在卡本身上插入了一个称为“ number1”的新类。然后，我使用JQuery搜索该类，然后在最接近的父匹配类“ carousel-item”上附加活动类。
这是新的PHP代码：
<div id="mpcarousellarge" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card-deck">
<?php
$class = '';
$args = array(
'post_type' => 'paradisepizzas',
'post_status' => 'future,publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'pizzatypes',
'field' => 'slug',
'terms' => 'specialtypizzas',
),
),
'posts_per_page' => -1,
'orderby' => 'id',
'order' => 'ASC',
);
$paradisepizzas2_query = null;
$paradisepizzas2_query = new WP_Query ($args);
$rowCount = 0;
if ( $paradisepizzas2_query->have_posts() ) : while ( $paradisepizzas2_query->have_posts() ) : $paradisepizzas2_query->the_post();
if ( $rowCount == 1 ) $class = ' number1';
else $class = '';
?>
<div class="card border border-dark cardheight<?php echo $class; ?>" id="<?php echo $rowCount; ?>">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?>
<img class="card-img-top m-auto" src="<?php echo $image[0]; ?>" alt="<?php echo $image[0]; ?>" />
<?php endif; ?>
<div class="card-body card-text text-center">
<?php the_content(); ?>
</div>
<div class="card-footer bg-dark text-light">
<h5 class="pizzafoot"><?php the_title(); ?></h5>
</div>
</div>
<?php
$rowCount++;
if($rowCount % 3 == 0 && $rowCount < 7) {echo '</div></div><div class="carousel-item"><div class="card-deck">';}
endwhile;
endif;
wp_reset_query();
?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="container">
<div class="row">
<div class="col">
<ol class="carousel-indicators" style="position: relative!important;">
<?php
$args = array(
'post_type' => 'paradisepizzas',
'post_status' => 'future,publish',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'pizzatypes',
'field' => 'slug',
'terms' => 'specialtypizzas',
),
),
'posts_per_page' => -1,
'orderby' => 'id',
'order' => 'ASC',
);
$mpclg_query = null;
$mpclg_query = new WP_Query ($args);
$num = $mpclg_query->found_posts;
$PostPerSlide = 3;
$SlideCount = $num/$PostPerSlide;
$mpc = 1;
?>
<?php if ( $mpclg_query->have_posts() ): ?>
<?php while ( $mpclg_query->have_posts() ) : $mpclg_query->the_post(); ?>
<?php while ($mpc <= $SlideCount) {
print '<li data-target="#mpcarousellarge" data-slide-to="';
echo $mpc;
print '"></li>';
$mpc++;
}
?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
这是我使用的JQuery：
$(document).ready(function(){
$('.carousel-item div.number1').closest('.carousel-item').addClass('active');
});