Question

我试图在10秒钟不活动后将滑块重设回第一张幻灯片。我的操作方式确实将幻灯片踢回到幻灯片1，但是当我滑到下一张幻灯片时，它将踢回到上一张幻灯片，而不是幻灯片2。

我尝试通过更改css属性来处理它，这确实将其带回了幻灯片1，但并没有清除下一张幻灯片以从1重新开始

您可以在以下笔上查看我的代码：https://codepen.io/anon/pen/yZvOGJ

idleTimer = null;
idleState = false;
idleWait = 2000;

$(document).ready(function () {

    $('*').bind('mousemove keydown scroll', function () {

        clearTimeout(idleTimer);

        idleState = false;

        idleTimer = setTimeout(function () { 

            // Idle Event
          $("div.flickity-slider").attr({
              style: "transform: translateX(0%);"
            });
          $("div.carousel-cell:not(:first)").removeClass("is-selected").attr("aria-hidden", "true");
          $("div.carousel-cell:first").addClass("is-selected").attr("aria-hidden","false" );



            idleState = true; }, idleWait);
    });

    $("body").trigger("mousemove");

});

我尝试浏览flickity网站上的“事件”部分，但我很难将2和2放在一起。任何帮助表示赞赏。

Answer 1

在喝了些咖啡，再经过反复试验后，发现了它。我会发布答案，而不是删除我的问题，以防其他人遇到问题。

// external js: flickity.pkgd.js
idleTimer = null;
idleState = false;
idleWait = 2000;



$(document).ready(function () {

    $('*').bind('mousemove keydown scroll', function () {

        clearTimeout(idleTimer);

        idleState = false;

        idleTimer = setTimeout(function () { 

            // Idle Event
            var $carousel = $('.carousel').flickity()
            .flickity( 'select', 0 );

            idleState = true; }, idleWait);
    });

    $("body").trigger("mousemove");

});

将Flickity重设为幻灯片1

1 个答案: