0

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>
  • I do not understand, is your problem the JS or the WP Loop? Also in your fiddle you do not show the list items anywhere – Nikolaos Aug 10 '14 at 17:17
  • The problem is the loop and how to implement the query list code to the carousel in the fiddle - so each featured post appears in the slide boxes if possible. thx – NewUser Aug 10 '14 at 17:30
  • I updated my Question - hope my Question is now easier to understand. – NewUser Aug 10 '14 at 17:37
  • wp_reset_query should only be used with query_posts, you should use wp_reset_postdata instead – Tom J Nowell Aug 11 '14 at 11:16
  • Don't abuse the php tag. Please read the tag descriptions before you use them and make sure that the specific tag is relevant to you question. Thank you :-) – Pieter Goosen Feb 5 '15 at 9:14
2

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

  • Hi NewUser, did the code above answer your question? If so them could you please show this by clicking on the up arrow next to the content to show that "this was useful", thanks. – Nikolaos Aug 12 '14 at 14:38
-1

Maybe you can change your query something like this:

('showposts=5&orderby=post_date&order=desc&category_name=featured');
  • showposts is depreciated. Was replaced by posts_per_page – Pieter Goosen Aug 11 '14 at 6:23
  • Yeah, I mean posts_per_page :) thanks. I just copied the code from the user's post, and add my correction. – HML Aug 11 '14 at 6:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.