在没有插件的情况下将Bootstrap轮播集成到WordPress中 [英] Integrating Bootstrap carousel in WordPress without plugin
本文介绍了在没有插件的情况下将Bootstrap轮播集成到WordPress中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的wordpress中集成了bootstrap传送带.幻灯片将从标记为精选"的帖子中获取,因此仅显示5个最近输入的精选"帖子.
I have integarted bootstrap carousel into my wordpress. The slides will be taken from the posts which will be tagged as "featured" so only 5 recently enter "featured" posts will be shown.
下面是我的代码:
<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
<ol class="carousel-indicators">
<li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-captions" data-slide-to="3" class=""></li>
<li data-target="#carousel-captions" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<a href="<?php the_permalink() ?>">
<img src="<?php the_field('header_banner', $post_id); ?>" alt="">
<div class="carousel-caption">
<h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
<p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details →</span>
</div></a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
<a class="left carousel-control" href="#carousel-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
问题是它不会滑动,因为活动"类不能静态工作.
The problem is It doesn't slide because the "active" class is not working statically.
我该如何解决?
谢谢
推荐答案
为避免两次查询,您可以在循环外将变量集设置为1.在循环中,当"active"类等于1时添加它,然后增加它.
To avoid having to query twice, you can set a variable set to 1 outside your loop. In the loop, you add the "active" class when it's equal to 1, then you increment it.
<?php
// Previous code here...
$i = 1;
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<div class="item<?php if ($i == 1) echo 'active'; ?>">
</div>
<?php
$i++;
endwhile;
wp_reset_postdata();
?>
这篇关于在没有插件的情况下将Bootstrap轮播集成到WordPress中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文