Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jcarousel infinite loop

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!

like image 935
remi90 Avatar asked Nov 27 '22 22:11

remi90


2 Answers

Cant you just use

wrap: 'circular'

?

like image 129
Hazza Avatar answered Dec 24 '22 00:12

Hazza


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

$('.jcarousel')
.jcarousel({
    wrap: 'circular'
})
.jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});
like image 30
user1935568 Avatar answered Dec 24 '22 01:12

user1935568