Flex slider post loop carousel

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?
https://codex.www.ads-software.com/Using_Javascript
https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

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… https://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.

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.

@mak1wp
Thanks for posting how you solved it.