在没有插件的情况下在WordPress中集成Bootstrap轮播

我已经将自举旋转木马整合到我的wordpress中。 幻灯片将从标记为“特色”的post中删除，因此最近只会显示5个“特色”post。

以下是我的代码：

 
 
 
 
 
 
 
 
  have_posts() ) : ?> have_posts() ) : $the_query->the_post(); ?> 
 <a href="https://stackoverflow.com/questions/19344696/integrating-bootstrap-carousel-in-wordpress-without-plugin/"> <img src="https://stackoverflow.com/questions/19344696/integrating-bootstrap-carousel-in-wordpress-without-plugin/" alt=""> 
 
Make
cat_name; ?>
 
 Miles |  Color

Details   → 
 
    
  
        

问题是它没有滑动，因为“活动”类不能静态工作。

我该如何解决？

谢谢

Answer 1

为避免必须两次查询，可以在循环外设置一个变量设置为1。 在循环中，当它等于1时添加“active”类，然后递增它。

 have_posts() ) : $the_query->the_post(); ?> 
 
  

Answer 2

将第一个查询限制为1个post。 在第一个循环中，将轮播项目类设置为活动。 重置查询并运行第二个循环，偏移一个，并取消活动类，如下所示：

  
 'post', 'posts_per_page' => 1 )); while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 
 First Slide 
  'post', 'offset' => 1 )); while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 
 Remaining Slides 
   

Answer 3

具有自定义post类型的Bootstrap 3（此处命名为“diapositives”）：

   'diapositives', 'posts_per_page' => -1 ) ); ?>  
  
 
 
 
 
  
 have_posts() ) : $diapositivesloop->the_post(); ?>  
  
 
 
 
       Previous    Next  
  

Answer 4

这是我提出的解决方案：

  'slides', 'oderby' => 'menu_order', 'posts_per_page' => -1 ); $slides = new WP_Query( $args ); if( $slides->have_posts() ): ?> 
 
  
  
 
 
 
 
 
 
  
 have_posts() ) : $slides->the_post(); $index++ ?>  
  
    
      Previous    Next  
 
 

我通过观看以下video了解到这一点：用户Ezer Sanbe 将Bootstrap Carousel集成到WordPress主题中 。 所有归功于他。

希望这可以帮助

Answer 5

在没有插件的情况下在WordPress中集成Bootstrap轮播

   
  'slider', 'posts_per_page' => 1, )); ?> have_posts() ) { $x++; $slider->the_post(); ?> 
      
  
  
  
  
 ‹ ›  

Answer 6

 
  
  'slider', 'posts_per_page' => 7, )); ?> have_posts() ) { $x++; $slider->the_post(); ?>