Support » Fixing WordPress » Flex slider post loop carousel
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>
-
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_scriptThanks 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.
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.
- The topic ‘Flex slider post loop carousel’ is closed to new replies.