我遇到了一个问题,我的推荐旋转木马99%正常工作但由于某种原因,下图链接中突出显示的旋转木马指示灯不会跳到其他幻灯片点击。
出现鼠标悬停状态,但点击后没有任何反应。我相信我已正确设置了数据幻灯片。
不确定我做错了导致这种情况。
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2 class="uppercase">Testimonials</h2>
</div>
</div>
<?php $args = array(
'post_type' => 'testimonial',
'posts_per_page' => 3
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
?>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<ol class="carousel-indicators">
<?php
$count = count($the_query->posts);
for ($i=0; $i<$count; $i++) {
?>
<li data-target="carousel" data-slide-to="<?php echo $i; ?>"<?php
if ($i == 0) {
?> class="active"<?php
}
?>></li>
<?php
}
?>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<?php
$count = 0;
while ($the_query->have_posts()) {
$the_query->the_post();
?>
<div class="item<?php
if ($count == 0) {
echo ' active';
}
?>">
<blockquote>
<p><?php echo the_field('testimonial_quote') ?></p>
<p><?php echo the_field('testimonial_client_name') ?></p>
<p><?php echo the_field('testimonial_business_name') ?></p>
</blockquote>
</div>
<?php
$count++;
}
?>
</div>
</div>
<?php wp_reset_postdata();
}
?>
</div>
</div>
</div>
</div>
这是前端输出代码的样子
<div class="col-md-offset-2 col-md-8">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0" class=""></li>
<li data-target="carousel" data-slide-to="1" class=""></li>
<li data-target="carousel" data-slide-to="2" class="active"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<div class="item">
<blockquote>
<p>Elliott made suggestions about "big-picture" things that I wouldn't even have thought to ask. If you're thinking about working with Elliott, I highly encourage you to do so! He's friendly, knowledgeable, and gets you results!</p>
<p>Nico Moreno</p>
<p>Convertt</p>
</blockquote>
</div>
<div class="item active left">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non malesuada diam. Nam lorem velit, placerat id mauris ac, ornare vehicula diam.</p>
<p>Gus Davidson</p>
<p>Arb & Grounds Equipment</p>
</blockquote>
</div>
<div class="item next left">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non malesuada diam. Nam lorem velit, placerat id mauris ac, ornare vehicula diam.</p>
<p>Joe Smith</p>
<p>Average Joe's Gym</p>
</blockquote>
</div>
</div>
</div>
</div>