Сбросить Flickity обратно к слайду 1 - PullRequest
Новая
       11

Сбросить Flickity обратно к слайду 1

0 голосов
/ 08 февраля 2019

Я пытаюсь сбросить свой слайдер обратно к первому слайду после 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.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 08 февраля 2019

Разобрался после кофе и проб и ошибок;Я опубликую ответ вместо того, чтобы удалять мой вопрос, если кто-то еще столкнется с проблемой. 

// 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");

});
...