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

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="https://wordpress.stackexchange.com/questions/157328/<?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