I am using this jQuery Carousel inside a wordpress theme to show several banner images. I chose this script because I am not a solid js coder and needed pagination that is instantiated automatically. you can see an example of this problem at http://bfc.ravennainteractive.com . It shows the first image. There are three available images, it lists 3 pagination items, but images 2 and 3 just show black backgrounds.
jQuery(document).ready(function(){
jQuery("div.hero").carousel({
loop: true,
pagination: true,
autoSlide: true,
autoSlideInterval: 5000,
dispItems: 1
});
});
<div class="hero">
<ul>
<?php query_posts('category_name=header');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<?php $header_image = get_post_meta($post->ID, 'header_image', true); ?>
<a href="<?php the_permalink() ?>"><img width="930" height="365" src="<?php echo $header_image; ?>" /></a>
</li>
<?php endwhile; else: ?>
<?php endif; wp_reset_query(); ?>
</ul>
</div>
If you view source, and click the images, they are there, the urls are good. Is this something stupid?
Thanks for the comments. With this specific carousel, the .hero class goes on the containing div. However I finally figured out that my problem was css based. I had not set the li’s to display:inline.
thanks so much