[英]Adding navigation links on custom post type slider
I'm working on a Wordpress theme from scratch. 我正在从头开始研究Wordpress主题。 I have a few sections, one of them showing a video and some testimonials. 我有几个部分,其中一部分显示了视频和一些推荐。 I've managed to construct (like this: http://www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/ ) a nice dynamic testimonial slider using custom post types (where each testimonial is a post) and a script that hide and show each post, making a simple but interesting transition. 我设法使用自定义帖子类型(其中: http : //www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/ )构造了一个不错的动态见证滑块每个证明书都是一个帖子)和一个隐藏和显示每个帖子的脚本,进行了简单但有趣的过渡。
Now I need to add a Carousel-like navigation under the slider (with those nice little dots). 现在,我需要在滑块下添加一个类似Carousel的导航(带有那些漂亮的小点)。 The problem is: I've tried many solutions but none of them worked. 问题是:我尝试了许多解决方案,但没有一个起作用。 Can someone shine a light for me? 有人可以给我照亮吗?
Here is the code I'm using to display the loop of the custom posts: 这是我用来显示自定义帖子循环的代码:
<div class="depo-wrap">
<div class="depoimentos">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") { ?>
<div class="slide" style="display: none;">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php } else { ?>
<div class="slide">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
$count++; }
endwhile;
endif; ?>
</div>
</div>
And here is the script that makes everything work: 这是使一切正常工作的脚本:
$(document).ready(function(){
$('.depoimentos .slide');
setInterval(function(){
$('.depoimentos .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('.slide').size()){
$(this).next().fadeIn(1000);
} else {
$('.depoimentos .slide').eq(0).fadeIn(1000);
}
});
}, 15000);
});
TL;DR: I have this code here and I'm trying to add some of those Carousel-like bullets, or even some next/prev buttons. TL; DR:我在这里有这段代码,我想添加一些类似旋转木马的项目符号,甚至一些下一个/上一个按钮。 I just want to add a navigation to this testimonial slide that I've created with custom post types in Wordpress. 我只想向我在Wordpress中使用自定义帖子类型创建的推荐幻灯片中添加导航。
Adding the Bootstrap Carousel worked (thanks @Enrico)! 添加Bootstrap Carousel成功了(感谢@Enrico)! Here's the code with some modifications: 这是经过一些修改的代码:
<div id="carousel-depoimentos" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner depoimentos">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 1 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
{ ?>
<div class="item active">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
}
endwhile;
endif;
wp_reset_postdata();
?>
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10, 'offset' => 1 );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
{ ?>
<div class="item">
<div class="citacao"><?php the_content(); ?></div>
<div class="info-pessoal"><?php echo $data[ 'nome-pessoa' ]; ?><span> | </span><?php echo $data[ 'local-origem' ]; ?></div>
<div class="cargo"><?php echo $data[ 'cargo' ]; ?></div>
</div>
<?php
}
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.