Jcarousel无限循环

发布于 2024-12-11 22:36:26 字数 1270 浏览 0 评论 0原文

我想做的是让我的滑块连续循环遍历 LI,而不是滚动直到到达最后一项然后停止(这就是它当前所做的)。

下面的代码来自于Wordpress站点,所以虽然只显示了1个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'
     });

});

谢谢!

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!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

天暗了我发光 2024-12-18 22:36:26

你就不能用吗

wrap: 'circular'

Cant you just use

wrap: 'circular'

?

寄意 2024-12-18 22:36:26

使用“换行”选项。使用以下示例:

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

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

$('.jcarousel')
.jcarousel({
    wrap: 'circular'
})
.jcarouselAutoscroll({
    interval: 3000,
    target: '+=1',
    autostart: true
});
夜灵血窟げ 2024-12-18 22:36:26

编辑:@Hazza 下面的答案是问题的正确答案 - 我的答案是对不同插件的建议,我知道该插件可以处理圆形滑动的要求。
当时我不知道如何使用OP的选择来回答他的问题,现在编辑它以表示与@Hazza的答案相同最多是不诚实的。

也就是说,如果您仍然觉得有必要投反对票,我将非常感谢知道答案到底有什么问题,以便我将来可以改进。谢谢!


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

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

在很多方面类似于(并且基于)jCarousel,但更轻量且非常灵活。

潜在的陷阱:
如果您在连续模式下滚动多个项目,并且项目总数不能完全被您滚动的数量整除,它可能会跳过一些项目。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文