使用metaslider插件，2个php代码之间存在冲突

Question

我有 WordPress 插件 metaslider 的 2 个代码片段。第一个添加了“肯烧伤效果”，第二个禁用了“动作暂停”属性。由于某种原因，“动作暂停”在几秒钟后扰乱了“肯烧伤效果”，可能是什么问题？谢谢！

第一个代码

$slideshow_id = '33';

add_filter('metaslider_css_classes', function($classes, $id) use ($slideshow_id) {
    if ($id != $slideshow_id) return $classes;
    return $classes . ' kenburns-effect';
}, 10, 2);

add_filter('metaslider_css', function($css, $settings, $id) use ($slideshow_id) {
    if ($id != $slideshow_id) return $css;
    return $css . "
    .kenburns-effect .flexslider .slides,
    .kenburns-effect .flexslider .slides > li {
        overflow: hidden;
    }
    .kenburns-effect .flexslider .slides > li .kenburns-inner {
        background-size: cover;
        background-position: center;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .kenburns-effect .flexslider .slides img {
        opacity: 0;
    }
    .kenburns-effect .flexslider .slides > li.flex-active-slide .kenburns-inner {
        animation: kb-zoom-out {$settings['delay']}ms;  
    }
    @-webkit-keyframes kb-zoom-out {
        0% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }";
}, 10, 3);

add_filter('metaslider_flex_slider_list_item_attributes', function($attributes, $slide, $id) use ($slideshow_id) {
    if ($id != $slideshow_id) return $attributes;
    $movements = ['center left', 'center center', 'center right', 'top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right'];
    $attributes['data-background'] = isset($slide['src']) ? $slide['src'] : '';
    $attributes['data-movement'] = $movements[array_rand($movements)];
    return $attributes;
}, 10, 3);

add_filter('metaslider_flex_slider_javascript', function($js, $id) use ($slideshow_id) {
    if ($id != $slideshow_id) return $js;
    return $js . ";window.jQuery('.kenburns-effect .slides .ms-image').each(function() {
        var background = $(this).data('background');
        var movement = $(this).data('movement');
        $(this).prepend(\"<div class='kenburns-inner' style='background-image:url(\" + background + \");transform-origin:\" + movement + \"'></div>\");
    });";
}, 10, 2);

第二个代码

function custom_metaslider_js() {

    $slideshow_id = '33';

    $js = "
    <script type='text/javascript'>
        jQuery(document).ready(function($) {
            $('.metaslider-{$slideshow_id}').flexslider({
                pauseOnAction: false
            });
        });
    </script>
    ";
    echo $js;
}
add_action('wp_footer', 'custom_metaslider_js');

Answer 1

我刚刚解决了这个问题，以这种方式修改“暂停操作代码”，正确的方法：

function metaslider_flex_params($options, $slider_id, $settings) {
    if ($slider_id == 33) { // check for slider ID (optional)
        $options['pauseOnAction'] = "false"; // pauseOnAction }
    } 
    return $options;
} 
add_filter('metaslider_flex_slider_parameters', 'metaslider_flex_params', 10, 3);