如何使用 php 关闭或打开 Swiper 自动播放并动态更改延迟？虽然我想创建一个自定义 Elementor 小部件

Question

我正在尝试为自定义 Elementor 小部件动态更改滑动幻灯片的自动播放参数。我尝试将字符串作为 swiper 类中的对象动态传递。但它不起作用。

(function($){
    "use strict";

    var WidgetTestimonialCarouselHandler = function ($scope, $) {

        var carousel_elem = $scope.find('.tpc-testimonial-wrapper-ff').eq(0);

            var settings = carousel_elem.data('settings');

            var autoPlay = settings['autoplay'];
            var autoplay_speed = parseInt(settings['autoplay_speed']) || 3000;
            var infiniteLoop = settings['infinite_loop'];
            var display_columns = parseInt(settings['display_columns']) || 2;
            var item_gap = parseInt(settings['item_gap']) || 20;
            
            var auto_Play = autoPlay;
            
            if (autoPlay==true){
                auto_Play = 'autoplay:{delay: '+autoplay_speed+'},'
            }
            else{
                auto_Play = 'autoplay:false,'
            };
           var wc_auto_play = auto_Play.replace(/"/g, '');

            var swiper = new Swiper('.tpc-testimonial-ff', {
                spaceBetween: item_gap,
                slidesPerView: display_columns,
                loop: infiniteLoop,
                wc_auto_play,
            });
        }
    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction( 'frontend/element_ready/eduhut-testi-addons.default', WidgetTestimonialCarouselHandler);

    });
})(jQuery);

我想使用elementor的切换按钮关闭或打开自动播放，并且我还需要更改自动播放的延迟值。但是，当我在没有 qoute 的情况下将该参数作为字符串传递时，它不起作用。

Answer 1

(function($){
    "use strict";

    var WidgetTestimonialCarouselHandler = function ($scope, $) {

        var carousel_elem = $scope.find('.tpc-testimonial-wrapper-ff').eq(0);

        var settings = carousel_elem.data('settings');

        var autoPlay = settings['autoplay'];
        var autoplay_speed = parseInt(settings['autoplay_speed']) || 3000;
        var infiniteLoop = settings['infinite_loop'];
        var display_columns = parseInt(settings['display_columns']) || 2;
        var item_gap = parseInt(settings['item_gap']) || 20;

        var autoplayOptions = autoPlay ? { delay: autoplay_speed } : false;

        var swiper = new Swiper('.tpc-testimonial-ff', {
            spaceBetween: item_gap,
            slidesPerView: display_columns,
            loop: infiniteLoop,
            autoplay: autoplayOptions,
        });
    }

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/eduhut-testi-addons.default', WidgetTestimonialCarouselHandler);
    });
})(jQuery);