为什么第一个带有 flexslider 的 <li> 在我的代码中显示为空白 <li>？

Question

我有一个关于 flexslider 的问题，我在 Wordpress 主题上使用它，但我有一个问题，为什么第一张幻灯片显示为空白幻灯片，我希望任何人都可以帮助我，PHP 代码工作正常，但我的问题是滑块中的列表，谢谢！

我的代码：

    <div id="lookslider" class="flexslider">
<ul class="slides">
  <li>

  <div id="lookbox">
  <?php $i = 0;
  if (have_posts() ) : while ( have_posts() ) : the_post();
     if ($i%4 == 0) echo '</li><li>'; ?>

    <div id="lookslide-box">
      <div class="lookimg">
        <?php echo get_the_post_thumbnail( $page->ID, 'featured_image' ); ?>
      </div>
      <div class="lookhead">
        <h3><?php the_title(); ?></h3>
        <a href="<?php the_permalink(); ?>">Take a look</a>
      </div>

    </div>

     <?php $i++; endwhile; endif; ?>
  </div>

  </li>
</ul>

Answer 1

在您的代码中，增量 $i 以 0 开头，循环内的 if 语句表示 ($i%4 == 0)。所以，这个循环将从 </li><li>.

开始

大多数浏览器（如果不是全部）会更正 html 代码，在 </li>.

之前添加 <li>

您可能只需要更改您的 $i（例如更改为 1）或在您的 if 中添加另一个条件。这是一个例子：

$i = 1;
if (have_posts()) :
    echo '<li>';
    while (have_posts()) :
        the_post();
        if ($i%5 == 0) {
            echo '</li><li>';
        }
        // echo stuff
        $i++;
    endwhile;
    echo '</li>';
endif;

我希望我说清楚了，如果我误解了什么，请告诉我。

为什么第一个带有 flexslider 的 <li> 在我的代码中显示为空白 <li>？

Why the first <li> with flexslider appears as blank <li> on my code?

wordpress

flexslider