Support » Fixing WordPress » Flex slider post loop carousel

  • Resolved mak1wp

    (@mak1wp)


    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

    (@keesiemeijer)

    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/Function_Reference/wp_enqueue_script

    Thread Starter mak1wp

    (@mak1wp)

    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/

    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

    (@mak1wp)

    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

    (@keesiemeijer)

    @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.