如何通过单击缩略图暂停 CarouFredSel 轮播答案

【问题标题】：How to pause a CarouFredSel carousel from clicking a thumbnail如何通过单击缩略图暂停 CarouFredSel 轮播
【发布时间】：2013-03-04 17:33:52
【问题描述】：

使用 CarouFredSel 继续我的无限问题：

我有一组控制轮播的缩略图。这是我之前关于如何设置的问题的链接：

caroufredsel image thumbnail pagination in wordpress

还有一个关于点击拇指时如何暂停它的问题

pause carousel on click caroufredsel

我的解决方案是添加延迟。

在您单击另一个缩略图之前，一切正常。什么都没发生。我认为这与暂停/延迟有关。就像我删除了超时功能一样，它会淡入每个单击的缩略图...但不再在每次单击缩略图时暂停幻灯片放映。

$('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {

                $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
                    setTimeout(function() {
                        $('#project-carousel').trigger('pause', true);
                    }, 1000);
                    return false;
        });
    });

总而言之，当您第一次单击任何缩略图时，这可以正常工作，随后单击任何缩略图都没有任何作用。好像我无法再次开始幻灯片放映。

我想到了一些条件语句，但我能想到的每一个都适用于每个实例，而不是来自后续点击的一个。像这样的：

if($(this).not(".paused")) {
       $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
       }
       else {
        $(this).addClass("paused");
       $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            setTimeout(function() {
           $('#project-carousel').trigger('pause', true);
            }, 1000);
             return false;
        }

但是，可惜的是，它总是满足第一个条件并且没有达到其他条件，因此不会暂停。我认为这可能只是一个逻辑问题，但也许它只是我需要添加的触发器以再次启动轮播。不知道。

【问题讨论】：

标签： jquery wordpress jquery-plugins caroufredsel

【解决方案1】：

这是一个延迟问题。这是解析的代码：

jQuery(function(){

    $(".project-arrows").click(function() {
        $('#project-carousel').trigger('play',true);
    });

    /* Attached an unique class name to each thumbnail image */
    $('#thumbs .thumb a').each(function(i) {
        $(this).addClass( 'itm'+i );

        /* add onclick event to thumbnail to make the main 
        carousel scroll to the right slide*/
        $(this).click(function() {
            $('#project-carousel').trigger('play',true);
            $('#project-carousel').trigger( 'slideTo', [i, 0, true] );
            $('#project-carousel').trigger('stop');
            return false;
        });
    });

诀窍是使用停止而不是暂停，并在任何点击时触发播放。

【讨论】：