Swiper API - onSetTranslate 回调已停止 运行

Question

我在项目开始时使用 Swiper API 做一个很酷的轮播，Swiper Sample

在我正在处理的项目中，我需要在拖动滑动的同时用一些图像制作动画，使用这些设置效果非常好：

var bgAnim = function () {
    var opacity = (100 + (swiper.translate / 8)) / 100,
        move = swiper.translate / 4,
        tDur = $('.swiper-wrapper').css('transition-duration').slice(0, -1) * 1000; // ## problem to run AUTOPLAY
    if (move > 0) { move = 0 }
    if (move < -200) { move = -200 }
    if (opacity > 1) { opacity = 1 }
    if (opacity < 0) { opacity = 0; tDur = tDur / 2 }

    $('#girl-bg').animate({     // ## problem to run AUTOPLAY
        'left': move,
        'opacity': opacity
    }, tDur);

    $('#logo-bg').animate({     // ## problem to run AUTOPLAY
        'opacity': opacity
    }, tDur);
}

var swiper = new Swiper('.vision', {
    //autoplay: 500,
    autoplayDisableOnInteraction: false,
    slidesPerView: 3,
    spaceBetween: 24,
    freeMode: true,
    slidesOffsetAfter: 1000,
    onSetTranslate: bgAnim
});

问题是，当我使用 autoplay 时，它与我在代码片段上方标记的两行冲突，如果我将 "animate" 和 $('.swiper-wrapper').css('transition-duration') 关闭它工作正常，但是我需要两者都为背景图像设置动画...

有人可以帮助我吗？

Answer 1

我找到了解决方案，我使用一些方法和回调实现了自动播放，如下所示，它运行良好。 (:

    var swiperAutoplay = function () {
            swiper.setWrapperTranslate(swiper.getWrapperTranslate() - 1);
            swiper.update(true);
            var autoTime = setTimeout(swiperAutoplay, 3);
            $(homeSwiper).children().click(function () {
                clearTimeout(autoTime);
            });
   };

    setTimeout(swiperAutoplay, 5000);