Bootsrap carousel for post

时间:2016-08-10 作者:tibewww

我想用Bootsrap旋转木马来显示我的帖子-

它们正在显示,但无法正常工作。它基本上不会滑动。。。。

下面是一个实例:

http://latitudesadventure.co.uk/novocore/dusty-oak/

我正在使用以下代码:

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
<div class="carousel-inner">
<?php 
  $my_query = new WP_Query(\'posts_per_page=5\');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;?>
   <!-- The 1st Loop... -->
   <div class="active item well-blue">
     <div class="offset1">       
     <div class="carousel-image">
     <?php 

if (class_exists(\'MultiPostThumbnails\')) : 

MultiPostThumbnails::the_post_thumbnail(get_post_type(), \'secondary-image\');

endif;

 ?>
 </div>

     <h3 style="color:white;text-align:center"><?php the_title(); ?></h3>
    <h3 style="color:white;text-align:center"> <?php the_field( "number" );  ?></h3>
   </div> 
 </div>
<?php endwhile;
  // The 2nd Loop limits the query to 2 more posts...
$limit_query = new WP_Query(\'posts_per_page=2\');
if($limit_query->have_posts()) : while ($limit_query->have_posts()) : $limit_query->the_post(); 
if( $post->ID == $do_not_duplicate ) continue; ?>
<!-- The 2nd Loop same data as 1st loop -->
<?php endwhile; endif;  wp_reset_query(); ?>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
如果我选择“post\\u per-page=1”,它们都会显示(两行),但是,它仍然不会滑动-我希望所有的帖子都会显示-使用当前状态逐个滑动,但无需执行任何操作,这不起作用。

任何帮助都将是惊人的,

非常感谢。

2 个回复
SO网友:pallavi

您已在所有幻灯片中添加了活动类。因此,将显示所有幻灯片。您只需在第一张幻灯片中添加活动类。检查下面的引导滑块代码-

<div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

SO网友:bagpipper

    <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
<div class="carousel-inner">
<?php 
  $my_query = new WP_Query(\'posts_per_page=5\');
  $count=1;
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;
$active= ($count==1? \'active\' : \'\');// this is to add active to the first slider
  ?>
   <!-- The 1st Loop... -->
   <div class="<?php echo $active ?> item well-blue">
     <div class="offset1">       
     <div class="carousel-image">
     <?php 
     $count++;


if (class_exists(\'MultiPostThumbnails\')) : 

MultiPostThumbnails::the_post_thumbnail(get_post_type(), \'secondary-image\');

endif;

 ?>
 </div>

     <h3 style="color:white;text-align:center"><?php the_title(); ?></h3>
    <h3 style="color:white;text-align:center"> <?php the_field( "number" );  ?></h3>
   </div> 
 </div>
<?php endwhile;
  // The 2nd Loop limits the query to 2 more posts...
$limit_query = new WP_Query(\'posts_per_page=2\');
if($limit_query->have_posts()) : while ($limit_query->have_posts()) : $limit_query->the_post(); 
if( $post->ID == $do_not_duplicate ) continue; ?>
<!-- The 2nd Loop same data as 1st loop -->
<?php endwhile; endif;  wp_reset_query(); ?>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>
我添加了一个计数器,以便仅将活动类添加到您的第一张幻灯片中。这应该可以让我知道它是否有效

相关推荐

如何修改WP_INCLUDE/BLOCKS/LATEST_posts.php

我是WordPress开发的初学者,希望得到一些帮助。我在一个简单的WordPress网站上工作。基本上,用户希望在主页上显示最新的帖子。我使用了最新帖子块,并将其设置为显示整个帖子内容,现在用户不希望帖子标题链接到单个帖子页面(因为帖子的内容显示在主页上)。如何安全地修改模板文件,使其像h2标记一样使用,而不是在主题中使用的href标记。我知道您可以创建子主题并修改wp_content 文件,但我不确定如何处理中的文件wp_include. 我读到一些关于修改functions.php 但我不确定,如果