Jcarousel无限循环

时间:2011-10-25 10:32:27

标签: jquery wordpress jcarousel

我要做的是让我的滑块连续循环通过LIs,而不是滚动直到它到达最后一个项目然后停止(这是它当前所做的)。

以下代码来自Wordpress网站,因此虽然它只显示一个LI,但前端输出的实际上大约有6个或7个:

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'
     });

});

谢谢!

3 个答案:

答案 0 :(得分:34)

不能使用

wrap: 'circular'

答案 1 :(得分:6)

使用'wrap'选项。使用以下作为示例:

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

答案 2 :(得分:0)

编辑:@ Hazza的答案是对这个问题的正确答案 - 我的答案是建议使用不同的插件,我知道它会处理循环滑动的要求。 当时我不知道如何使用OP的选择来回答他的问题,现在编辑它就像@Hazza的回答一样,充其量也是不诚实的。

那就是说,如果你仍然觉得需要downvote,我会非常感谢知道答案到底出了什么问题所以我将来可以改进。谢谢!


我不知道如何使用jCarousel完成此任务。但是有一个名为jCarouselLite的派生插件有一个连续的选项:

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

在许多方面(基于)jCarousel类似,但更轻巧,更灵活。

潜力gotchya: 如果您以连续模式滚动多个项目,如果项目总数不能被您滚动的数字完全整除,则可以跳过一些项目。