wp Query Posts to display in Nivo Slider

Question

i have coded a slider into my wordpress theme to use query posts to display the thumbnail and the content however it appears that its displaying the whole posts? and not just the one relating to the slide at that time?

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <?php $the_query = new WP_Query( 'showposts=5' ); ?>
        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <?php the_post_thumbnail(); ?> 
            <div class="slide-caption">  
                <h3><?php the_title(); ?></h3>
                <?php the_content(); ?>
       <?php endwhile;?>

    </div>  

Please can someone advise what I'm doing wrong?

http://www.milknhny.co.uk/PeterWork

This is the NIVO Mark up:

<div class="slider-wrapper">
  <div id="slider" class="nivoSlider">
      <img src="images/slide1.jpg" alt="" />
      <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
      <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
      <img src="images/slide4.jpg" alt="" />
     </div>
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  </div>

As you can see the caption for this is completely outside the wrappers?

Answer 1

Take a look at your code now that I have formatted it. You are opening <div class="slide-caption"> inside the Loop but are not closing it until after the Loop, and you are missing two closing </div> tags altogether (though that may be a copy/paste error). That means the markup is going to be badly broken, which could lead to unexpected behavior.

You should have something like:

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider"><?php
        $the_query = new WP_Query( 'showposts=5' );
        while ($the_query -> have_posts()) : $the_query -> the_post();
            the_post_thumbnail(); ?> 
            <div class="slide-caption">  
                <h3><?php the_title(); ?></h3>
                <?php the_content(); ?>
            </div>
       <?php endwhile;?>
    </div>
</div>

Always format your code carefully and you will spot this stuff more easily, use a decent code editor that will do syntax highlighting, and you don't need all those opening and closing <php/?> tags. Only use them when you are actually switching from PHP to HTML. They aren't line endings or line start-ings.

Edit:

If that second block of code is an example from the NIVO docs, then you are trying to do something that is not supported-- at least support is not indicated by that example. It does not appear that you can assign a caption to each image in the slider, but just assign a caption globally.

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider"><?php
        $the_query = new WP_Query( 'showposts=5' );
        while ($the_query -> have_posts()) : $the_query -> the_post();
            the_post_thumbnail(); ?> 
        <?php endwhile;?>
    </div>
    <div id="htmlCaption" class="nivo-html-caption slide-caption">  
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
    </div>
</div>

I also added htmlCaption as the script might use it.