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