Question

这很有趣。我在主页上有一个旋转木马，在内页上有一个旋转木马。两个代码完全相同，但由于某种原因，内部页面轮播在末尾显示空白幻灯片，然后达到10px的高度并开始幻灯片放映（仍然是10px）。主页旋转木马完美运作。

以下是两个轮播的代码

<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" style="max-height: 481px;overflow: hidden;">
  <div class="carousel-inner" style="overflow: inherit;">

    <div class="item active">
      <img src="http://example.com/image1.png">
    </div>

    <div class="item">
      <img src="http://example.com/image2.png">
    </div>

  </div>
</div>

我认为这可能是一个相互冲突的ID＆＃34;错误，所以我更改了内部页面轮播上的ID，但它没有做任何事情。

首页模板代码：

<?php
/*
Template Name: Homepage
*/
?>

<?php get_header(); ?>


<?php

if (is_front_page() ) {

?> 
    <div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" style="max-height: 481px;overflow: hidden;">
  <div class="carousel-inner" style="overflow: inherit;">

    <div class="item active">
      <img src="http://example.com/image1.png">
    </div>

    <div class="item">
      <img src="http://example.com/image2.png">
    </div>

  </div>
</div>

<?php } else { } ?>


<div class="row main-content homepage">
<div class="col-sm-12">
    <div class="row">
    <div class="col-sm-4">test
    </div>
    <div class="col-sm-4">test    
</div>
    <div class="col-sm-4">test
</div>
</div></div></div>
<?php get_footer(); ?>

内部网页代码：

<?php get_header(); ?>



<div class="row main-content">
<div class="col-sm-12">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>



<?php if (!is_front_page() ) { ?>   <h1><?php the_title() ;?></h1>  <?php } else {} ?>

    <?php the_content(); ?>



<?php endwhile; else: ?>



    <p>Sorry, this page does not exist</p>



<?php endif; ?>

</div>
</div><!-- end row -->
<?php get_footer(); ?>

谢谢！

Answer 1

koala_dev的评论让我意识到WordPress处理内容循环的方式可能有问题。这就是搞砸了我的旋转木马。我为这个特定页面创建了一个新的内部模板，并将我的轮播转移到了该模板。它现在工作正常。谢谢你的阅读。

Bootstrap 3旋转木马在结束时显示空白幻灯片

1 个答案: