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

Question

I have a question about flexslider, I'm working with it on Wordpress theme, but I've a problem, why te first slide appears as blank slide , I hope anyone can help me with this, the PHP code works fine but my problem is with the list in slider, thanks!.

my code :

    <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

In your code, your increment $i starts with 0 and your if statement inside the loop says ($i%4 == 0). So, this loop will start with </li><li>.

Most of the browsers (if not all) will correct the html code adding a <li> before your </li>.

You probably just need to change your $i (to 1 for example) or just add another criteria in your if. here is a example:

$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;

I hope i made myself clear, let me know if i misunderstood something.