I stuck with this. I would like to have a portfolio carousel, that shows 9 of the latest posts in the carousel, and when you click on an arrow, than you will the 9 older posts etc.

How can I get this working?

My theme code:

<section id="portfolio">
    <div class="container_12">

        <ul class="entrybox">
            <?php 
                $args = array('post_type' => 'portfolio', 'posts_per_page' => -1, 'paged' => $paged);
                $loop = new WP_Query($args);
                $count = 0;
            ?>

            <?php if ($loop) : while ($loop->have_posts()) : $loop->the_post(); ?>
            <li class="grid_4 portfolio-post">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <header class="post-thumb">
                    <?php the_post_thumbnail('thumbnail-portfolio'); ?>
                </header><!-- End header.post-thumb -->

                <aside>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_excerpt(); ?></p>
                </aside><!-- End aside -->
            </a>
            </li><!-- End li.grid_4 portfolio-post -->
            <?php endwhile; ?>
            <?php else : ?>
                <p>No portfolio items were found! I'm not sure what you're looking for.</p>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
        </ul><!-- End ul.entrybox -->

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->
</section><!-- End section#portfolio -->

<hr>

<?php get_template_part( 'contact' ); ?>

I stuck with this. I would like to have a portfolio carousel, that shows 9 of the latest posts in the carousel, and when you click on an arrow, than you will the 9 older posts etc.

How can I get this working?

My theme code:

<section id="portfolio">
    <div class="container_12">

        <ul class="entrybox">
            <?php 
                $args = array('post_type' => 'portfolio', 'posts_per_page' => -1, 'paged' => $paged);
                $loop = new WP_Query($args);
                $count = 0;
            ?>

            <?php if ($loop) : while ($loop->have_posts()) : $loop->the_post(); ?>
            <li class="grid_4 portfolio-post">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <header class="post-thumb">
                    <?php the_post_thumbnail('thumbnail-portfolio'); ?>
                </header><!-- End header.post-thumb -->

                <aside>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_excerpt(); ?></p>
                </aside><!-- End aside -->
            </a>
            </li><!-- End li.grid_4 portfolio-post -->
            <?php endwhile; ?>
            <?php else : ?>
                <p>No portfolio items were found! I'm not sure what you're looking for.</p>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
        </ul><!-- End ul.entrybox -->

    <div class="clear"></div><!-- End div.clear -->
    </div><!-- End div.container_12 -->
</section><!-- End section#portfolio -->

<hr>

<?php get_template_part( 'contact' ); ?>

• custom-post-types
• posts

Share Improve this question edited Mar 20, 2014 at 20:31 Casper asked Mar 20, 2014 at 19:52 CasperCasper 40911 gold badge66 silver badges1919 bronze badges 4

• 3 Can you post any code? – montrealist Commented Mar 20, 2014 at 19:53
• @dalbaeb I have only the html/css and php markup for my wordpress theme. I was wondering how to implement a carousel to it. See above the update with code. – Casper Commented Mar 20, 2014 at 20:30
• There are many ways to do it. You need to code up the backend to generate the posts (either via AJAX or not), and then on the front-end put some JS in place to make it all rotate. I'd say your question is too general. – montrealist Commented Mar 20, 2014 at 20:47
• My posts will be showed. I have create a custom post type in Wordpress. So the question is how to set 9 elements - 3 rows - in each slide? @dalbaeb – Casper Commented Mar 20, 2014 at 21:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This code is taken from another answer but slightly modified to load your posts from the portfolio post type. This shows you how to load several posts and includes them in a slider. With some modification to the Loop you could out put the first X posts and cycle them using an offset parameter.

JavaScript

<!-- Include Unslider JS -->
<!-- YOU SHOULD INCLUDE WP JQUERY (ENQUEUE IT YOUR THEME) -->
<script src="//unslider/unslider.min.js"></script>

<!-- Set up the necessary JS for the slider -->
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
    $('.banner').unslider({
        // Add other arguments here
        speed: 500
    })
});
</script>

CSS

<!-- Some basic CSS for the slider -->
<!-- Remember to add your own CSS styling -->
<style type="text/css">
.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }  
</style>

PHP (the Query)

<!-- Output the HTML for the slider -->
<?php 
// Do the custom WP_Query first
    $query = new WP_Query( 
        array (
            'post_type' => 'portfolio',
            'posts_per_page' => '-1',
            'meta_key' => '_thumbnail_id', // only pull posts with images

        )
    );

// if we have posts, display them:
if ( $query->have_posts() ) : ?> 


<!-- Some basic HTML for the slider
     Each slide is simply an <li>
     within a surrounding <ul>
     inside an encasing div -->
<div class="banner">
    <ul>

    <?php // While we have posts, output them as <li>'s
    while ( $query->have_posts() ) : $query->the_post(); ?>
        <li style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>);">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>          
        </li>
    <?php endwhile; wp_reset_postdata(); ?>
    </ul>
</div>

<?php else : ?>
    <!-- ENTER HTML IF THERE'S NO SLIDES HERE -->
<?php endif; ?> 

Now to get this working you can simply paste each of those code fragments into your template file (but I've included them separately in case you wanted to include in your theme's CSS/JS files). You'll need to modify the Loop to include the first 9 posts segment of the PHP code and CSS to fit your theme but this example should work. Also be sure to check out the full docs and options list for Unslider