Добавление навигационных ссылок на слайдер пользовательского типа записи

Я работаю над темой Wordpress с нуля. У меня есть несколько разделов, один из них показывает видео и несколько отзывов. Мне удалось построить (например: http://www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/) хороший динамический слайдер отзывов, использующий настраиваемые типы постов (где каждый отзыв — это пост) и скрипт, который скрывает и показывает каждый пост, делая простой, но интересный переход.

Теперь мне нужно добавить карусельную навигацию под ползунком (с этими милыми точками). Проблема в том, что я пробовал много решений, но ни одно из них не сработало. Может ли кто-нибудь пролить свет для меня?

Вот код, который я использую для отображения цикла пользовательских сообщений:

<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.


javascript wordpress jquery custom-post-type testimonials
person Gabriel Silva    schedule 18.01.2016    source источник
comment
Только некоторые комментарии: ваш пост слишком длинный, с большим количеством ненужной информации (о вашем проекте и т.д.). Лучшее значение для StackOverflow — это простой вопрос, сосредоточенный на проблеме. Самое замечательное, что вы можете сделать, это создать минимальную проблему и создать что-то вроде JSFiddle, чтобы мы могли легко получить доступ к вашей проблеме.   -  person areim    schedule 18.01.2016
comment
@areim О, извините за это! Я принял ваше редактирование! :)   -  person Gabriel Silva    schedule 18.01.2016
comment
Привет. Есть ли причина, по которой вы не используете саму карусель начальной загрузки?   -  person Enrico    schedule 18.01.2016
comment
@Enrico В проекте не используется среда Bootstrap...:/   -  person Gabriel Silva    schedule 19.01.2016
comment
Я не знаю о вашей конкретной среде, но вы можете легко включить некоторые функции начальной загрузки, не нарушая другие компоненты. Вы можете, конечно, создать функциональность слайдера с нуля, но это, безусловно, займет больше времени.   -  person Enrico    schedule 19.01.2016
comment
@ Энрико, я попробую!   -  person Gabriel Silva    schedule 19.01.2016
comment
Простите: пытаетесь добавить бутстрап или начать с нуля?   -  person Enrico    schedule 19.01.2016
comment
@Enrico Я добавляю Bootstrap, чтобы использовать функциональность карусели. Пока все работает - мне просто нужно сделать несколько настроек, и я думаю, что все будет работать отлично! Спасибо за совет!   -  person Gabriel Silva    schedule 19.01.2016
comment
Добро пожаловать, спросите, нужна ли вам дополнительная помощь   -  person Enrico    schedule 19.01.2016

Ответы (1)


arrow_upward
0
arrow_downward

Добавление 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>

person Gabriel Silva    schedule 20.01.2016