Jcarousel infinite loop

2 Views

What I’m trying to do is make my slider continuously loop through the LIs, rather than scroll until it gets to the last item and then stop (which is what it currently does).

The following code is from a WordPress site, so although it only displays one LI, there are infact about 6 or 7 outputted in the front-end:

Read More

PHP 

<ul id="slideshowContainer" class="jcarousel jcarousel-skin-tango">
            <?php $clientLogos = new WP_Query(array('post_type' => 'client-logos', 'posts_per_page' => -1)); ?>
            <?php while ($clientLogos->have_posts() ) : $clientLogos->the_post(); ?>
            <li>
                <?php if (has_post_thumbnail( $post->ID )): ?>
                    <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
                    <img src="<?php bloginfo('template_directory'); ?>/thumbs.php?src=<?php echo $image[0]; ?>&h=100&zc=1" alt="<?php the_title(); ?>" />
                <?php endif; ?>
            </li>
            <?php endwhile;?>
            <div style="clear:both"></div>
        </ul>

JS 

jQuery(document).ready(function() {

jQuery('#slideshowContainer').jcarousel({
    scroll: 1,
    auto: .01,
    wrap: 'last',
    easing: 'linear'
     });

});

Thanks!

Post Views: 2

Related posts

Leave a Reply

3 comments

  2. Use the ‘wrap’ option. Use the following as an example:

    $('.jcarousel')
.jcarousel({
    wrap: 'circular'
})
.jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});

  3. EDIT: @Hazza’s answer below is the correct answer to the question – my answer is a suggestion for a different plugin which I knew would deal with the requirement for circular sliding.
    At the time I didn’t know how to use the OP’s choice to answer his question, and editing it now to say the same as @Hazza’s answer would be disingenuous at best.

    That said, if you still feel the need to downvote I would very much appreciate knowing what exactly is wrong with the answer so I can improve in future. Thanks!

    I don’t know how to accomplish this using jCarousel. But there is a derivative plugin called jCarouselLite that has a continuous option:

    http://www.gmarwaha.com/jquery/jcarousellite/

    Similar in many ways (and based on) jCarousel, but much more lightweight and pretty flexible.

    Potential gotchya:
    If you scroll more than one item in continuous mode, it can skip some if the total number of items is not exactly divisible by the number you are scrolling.