Jcarousel infinite loop

Question

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:

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!

score 35 · Answer 1 · answered Nov 11 '11 at 11:38

35

Cant you just use

wrap: 'circular'

?

answered Nov 11 '11 at 11:38

Hazza

6,441
3
24
37

1

Don't know how question poster ignore accepting this answer ;) – LuckyCoder Dec 20 '13 at 09:31
http://sorgalla.com/jcarousel/docs/reference/configuration.html#wrap Maybe you just cant spell 'circular'? – Hazza Feb 06 '14 at 17:55
1

@Hazza - actually, the problem with my code was that a lost '}' that didn't cause an parse error. Everything worked except the circular wrap. So this is actually the correct answer – Nuno Furtado Feb 11 '14 at 11:27
JavaScript loves to hide pesky { }'s :( – Hazza Feb 11 '14 at 11:39
@Enthusiast probably because it was a couple of weeks after mine and he's not logged in since. This is the correct answer but I can't delete mine because it is accepted. And I get downvotes because it doesn't answer the question directly :( – totallyNotLizards Apr 15 '14 at 07:57

score 7 · Answer 2 · answered Sep 30 '14 at 16:29

7

Use the 'wrap' option. Use the following as an example:

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

answered Sep 30 '14 at 16:29

user1935568

71
1
1

totallyNotLizards · Accepted Answer · 2014-04-15T10:56:52.653

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.

Jcarousel infinite loop

3 Answers3