[英]Adding navigation links on custom post type slider
我正在從頭開始研究Wordpress主題。 我有幾個部分,其中一部分顯示了視頻和一些推薦。 我設法使用自定義帖子類型(其中: http : //www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/ )構造了一個不錯的動態見證滑塊每個證明書都是一個帖子)和一個隱藏和顯示每個帖子的腳本,進行了簡單但有趣的過渡。
現在,我需要在滑塊下添加一個類似Carousel的導航(帶有那些漂亮的小點)。 問題是:我嘗試了許多解決方案,但沒有一個起作用。 有人可以給我照亮嗎?
這是我用來顯示自定義帖子循環的代碼:
<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>
這是使一切正常工作的腳本:
$(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:我在這里有這段代碼,我想添加一些類似旋轉木馬的項目符號,甚至一些下一個/上一個按鈕。 我只想向我在Wordpress中使用自定義帖子類型創建的推薦幻燈片中添加導航。
添加Bootstrap Carousel成功了(感謝@Enrico)! 這是經過一些修改的代碼:
<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.