Show last 5 posts from featured category on query carousel slider with prev and next button

Question

I managed to set up a query carousel slider on my test-site. How can i adapt the slider to show the 5 latest posts from my featured post category with thumb, title and link to the post instead of the manuel written html parts?

Here is the fiddle

I already find a code to show up the featured posts with following code - but i dont know how to implement the below code (or any other code) into the carousel slider (see fiddle above) to show each featured post in each box... :(

        <ul class="test">   
            <?php
            $default_thumbnail = 'http://.....d-slider.png';
            $the_query = new WP_Query('showposts=5&orderby=desc&category_name=featured');
            while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <li>
            <a target="_blank" href="<?php the_permalink()?>" title="<?php the_title_attribute(); ?>">
                        <?php
                        if (has_post_thumbnail()):
                        the_post_thumbnail('default-thumbnail');
                        else:
                        ?>
                        <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
                        <?php endif; ?>
            <h2><?php the_title(); ?></h2></a>          
            </li>           
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
        </ul>

Answer 1

Firstly I have edited your code to remove the thumbnail between the ul and the li as you cannot place anything there and placed it in a p tag for demonstration purposes only you can change it to whatever you like. I have also added a next and previous button for you after the ul and a div to contain the slider...

<p><?php $default_thumbnail = 'http://.....d-slider.png';</p>
<div class="slideshow-image-slider">
        <ul class="test">   
            $the_query = new WP_Query('showposts=5&orderby=desc&category_name=featured');
            while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <li>
            <a target="_blank" href="<?php the_permalink()?>" title="<?php the_title_attribute(); ?>">
                        <?php
                        if (has_post_thumbnail()):
                        the_post_thumbnail('default-thumbnail');
                        else:
                        ?>
                        <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
                        <?php endif; ?>
            <h2><?php the_title(); ?></h2></a>          
            </li>           
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
        </ul>
        <p class="slider-control-prev"><a href="#">previous</a></p>
        <p class="slider-control-next"><a href="#">next</a></p>
</div>

Your Wordpress PHP is now correct, if I understand correctly you are trying to create a custom slider with a next and previous button for that you could use the following jQuery, in your themes JS...

var slideCount = $('.slideshow-image-slider ul li').length;
var slideWidth = $('.slideshow-image-slider ul li').width();
var slideHeight = $('.slideshow-image-slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('.slideshow-image-slider').css({ width: slideWidth, height: slideHeight });
$('.slideshow-image-slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.slideshow-image-slider ul li:last-child').prependTo('.slideshow-image-slider ul');
function moveLeft() {
    $('.slideshow-image-slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('.slideshow-image-slider ul li:last-child').prependTo('.slideshow-image-slider ul');
        $('.slideshow-image-slider ul').css('left', '');
    });
};
function moveRight() {
    $('.slideshow-image-slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('.slideshow-image-slider ul li:first-child').appendTo('.slideshow-image-slider ul');
        $('.slideshow-image-slider ul').css('left', '');
    });
};
$('.slider-control-prev a').click(function () {
    moveLeft();
});
$('.slider-control-next a').click(function () {
    moveRight();
});

Basically the jQuery above will automatically add your additional li's and add a previous and next button for each slide, animating between each of the slides.

Logically and if I have understood correctly the above should do the trick :) Let me know how you get on

Answer 2

Maybe you can change your query something like this:

('showposts=5&orderby=post_date&order=desc&category_name=featured');