Title: Flex slider post loop carousel
Last modified: August 21, 2016

---

# Flex slider post loop carousel

 *  Resolved [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/)
 * Hey,
 * I’ve been working on creating a flex slider based post loop carousel for about
   4 hours now and I cant figure out for the life of me why its not working properly,
   if anyone has advice on this I’d really appreciate any help I can get…
 * I’ve got all scripts etc working regarding flexslider – and few various sliders
   about for homepage / gallery post format / portfolio post type. Last on the list
   is to build a simple slider plugin – using the carousel feature.
 * I’m getting the carousel to come up, but it only want to display one image? (
   and part of an image underneath the 1 image – not a row of images like it should
   do)
 * I’ve attached the code I’ve used below. Many many thanks to anybody who can help
   with this!
 * Thanks
 * The call for the carousel….
 *     ```
       <div class="flexslider">
       <div id="slider" class="flexcarousel">
       <ul class="slides">
       	<?php
               $post_query = new WP_Query ( 'post_type' , 'post'  );
               if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>
           <li>
               <?php the_post_thumbnail(); ?>
           </li><?php endwhile; ?><?php endif; ?>
       </ul>
       </div>
       </div>
       ```
   
 * The script… (print function)
 *     ```
       <script type="text/javascript" charset="utf-8">
         jQuery(window).load(function() {
         jQuery(\'.flexcarousel\').flexslider({ 
   
           animation: "slide",
           animationLoop: true,
           itemWidth: 210,
           itemMargin: 5,
           minItems: 2,
           maxItems: 4,
           namespace: \'carousel-\',
   
         }); });
       </script>
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/#post-3954285)
 * I’m not familiar with flex slider but try querying this way:
 *     ```
       <?php
               $post_query = new WP_Query ( 'posts_per_page=3'  );
               if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>
       ```
   
 * The post type ‘post’ is the default post type when you use new WP_Query.
 * How did you insert the javascritpt?
    [http://codex.wordpress.org/Using_Javascript](http://codex.wordpress.org/Using_Javascript)
   [http://codex.wordpress.org/Function_Reference/wp_enqueue_script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)
 *  Thread Starter [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/#post-3954293)
 * Thanks for the reply keesiemeijer!
 * I think I’ve just figured out the problem, the post query wasnt the issue.
 * Looks like it was a CSS issue :S
 * I’ve (more or less) just got it working using the following code…
 *     ```
       <div class="flexslider">
       <div class="list_carousel">
           <ul id="foo2">
       <?php
               $carouselPosts = new WP_Query();
               $carouselPosts->query('post_type' , 'post' );
               ?>
               <?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post(); ?>
   
           <li>
               <?php the_post_thumbnail(); ?>
           </li><?php endwhile; ?>
       </ul>
       </div>
       </div>
   
       <style>
       .list_carousel {
           height: 175px;
           margin: 0 auto;
           overflow: hidden;
           width: 660px;
       }
       .list_carousel ul {
           margin: 0;
           padding: 0;
           list-style: none;
           display: block;
       }
       .list_carousel li {
           font-size: 14px;
           color: #333;
           width: 200px;
           padding: 0;
           margin: 2px;
           display: block;
           float: left;
       }
       .list_carousel.responsive {
           width: auto;
           margin-left: 0;
       }
       .list_carousel .clearfix {
           float: none;
           clear: both;
       }
       .list_carousel a.prev {
           background: url("next-arrow-left.png") no-repeat scroll 0 0 transparent;
           display: block;
           height: 150px;
           position: relative;
           top: -174px;
           width: 50px;
       }
       .list_carousel a.next {
           background: url("next-arrow-right.png") no-repeat scroll 0 0 transparent;
           display: block;
           height: 150px;
           position: relative;
           left: 635px !important;
           top: -324px;
           width: 50px;
       }
       .list_carousel a.prev {
       }
       .list_carousel a.next {
           right: -29px;
       }
       .list_carousel a.prev.disabled, a.next.disabled {
           cursor: default;
       }
       .list_carousel a.prev span, a.next span {
           display: none;
       }
       #foo2 {
           left: 20px;
           margin: 0 2px;
           position: relative;
       }
       </style>
       ```
   
 * which I found here… [http://wp.tutsplus.com/tutorials/theme-development/displaying-posts-in-a-carousel/](http://wp.tutsplus.com/tutorials/theme-development/displaying-posts-in-a-carousel/)
 * The JS is being inserted via a print function for the various different styles
   of sliders I’ve got about the place…
 *     ```
       function efs_script(){
   
       print '<script type="text/javascript" charset="utf-8">
         jQuery(window).load(function() {
       jQuery(\'.flexslider\').flexslider({
        slideshow: false,
                                   controlNav: false,
   
         }); });
       </script>
       ';
       }
       ```
   
 * Using jQuery instead of the advertised $ on flexslider as $ didnt work in wordpress
   for me (that took me ages to figure out too!)
 * Thanks again for your reply.
 *  Thread Starter [mak1wp](https://wordpress.org/support/users/mak1wp/)
 * (@mak1wp)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/#post-3954320)
 * PLEASE IGNORE MY LAST POST!!
 * Its a load of nonsense.
 * Instead of all that new code – all I had to do was remove a few lines of code
   from the original script i posted to get it working. DOH!!!!!
 * so from this….
 *     ```
       <div class="flexslider">
       <div id="slider" class="flexcarousel">
       <ul class="slides">
       	<?php
               $post_query = new WP_Query ( 'post_type' , 'post'  );
               if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>
           <li>
               <?php the_post_thumbnail(); ?>
           </li><?php endwhile; ?><?php endif; ?>
       </ul>
       </div>
       </div>
       ```
   
 * to this….
 *     ```
       <div class="flexcarousel">
       <ul class="slides">
       	<?php
               $post_query = new WP_Query ( 'post_type' , 'post'  );
               if($post_query->have_posts() ) : while($post_query->have_posts() ) : $post_query->the_post(); ?>
           <li>
               <?php the_post_thumbnail(); ?>
           </li>
       	<?php endwhile; ?><?php endif; ?>
       </ul>
       </div>
       ```
   
 * Hope this helps people.
 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/#post-3954341)
 * [@mak1wp](https://wordpress.org/support/users/mak1wp/)
    Thanks for posting how
   you solved it.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Flex slider post loop carousel’ is closed to new replies.

## Tags

 * [flex](https://wordpress.org/support/topic-tag/flex/)
 * [flexslider](https://wordpress.org/support/topic-tag/flexslider/)
 * [post loop](https://wordpress.org/support/topic-tag/post-loop/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/flex-slider-post-loop-carousel/#post-3954341)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics