如何根据宽度屏幕更改 Slider Revolution 上的偏移 jquery 选项

Question

我面临的问题是，我需要设置垂直偏移（这可以在插件的面板中设置），但我只希望在某些屏幕尺寸上使用它，因为我的 header 是在大屏幕上垂直，在小尺寸时水平，因此仅在小尺寸上需要偏移。

宽度大于 1100px 时我需要 0px 的偏移量，但宽度小于 125px 时我需要偏移量；

这是使用所需选项启动插件的脚本，我需要更改偏移量的脚本就是这个 fullScreenOffset

<script type="text/javascript">
                /******************************************
        -   PREPARE PLACEHOLDER FOR SLIDER  -
    ******************************************/

    var setREVStartSize=function(){
        try{var e=new Object,i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;
            e.c = jQuery('#rev_slider_2_1');
            e.responsiveLevels = [1240,1024,778,480];
            e.gridwidth = [1400,1240,778,480];
            e.gridheight = [868,768,960,720];

            e.sliderLayout = "fullscreen";
            e.fullScreenAutoWidth='on';
            e.fullScreenAlignForce='off';
            e.fullScreenOffsetContainer= '';
            e.fullScreenOffset='';
            if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f})

        }catch(d){console.log("Failure at Presize of Slider:"+d)}
    };

    setREVStartSize();

                var tpj=jQuery;

    var revapi2;
    tpj(document).ready(function() {
        if(tpj("#rev_slider_2_1").revolution == undefined){
            revslider_showDoubleJqueryError("#rev_slider_2_1");
        }else{
            revapi2 = tpj("#rev_slider_2_1").show().revolution({
                sliderType:"standard",
                sliderLayout:"fullscreen",
                dottedOverlay:"none",
                delay:9000,
                navigation: {
                    keyboardNavigation:"on",
                    keyboard_direction: "vertical",
                    mouseScrollNavigation:"on",
                        mouseScrollReverse:"default",
                    onHoverStop:"off",
                    touch:{
                        touchenabled:"on",
                        swipe_threshold: 75,
                        swipe_min_touches: 1,
                        swipe_direction: "vertical",
                        drag_block_vertical: false
                    }
                    ,
                    bullets: {
                        enable:true,
                        hide_onmobile:true,
                        hide_under:1024,
                        style:"zeus",
                        hide_onleave:false,
                        direction:"vertical",
                        h_align:"right",
                        v_align:"center",
                        h_offset:30,
                        v_offset:0,
                        space:5,
                        tmp:'<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title">{{title}}</span>'
                    }
                },
                responsiveLevels:[1240,1024,778,480],
                visibilityLevels:[1240,1024,778,480],
                gridwidth:[1400,1240,778,480],
                gridheight:[868,768,960,720],
                lazyType:"none",
                shadow:0,
                spinner:"spinner2",
                stopLoop:"on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shuffle:"off",
                autoHeight:"off",
                fullScreenAutoWidth:"on",
                fullScreenAlignForce:"off",
                fullScreenOffsetContainer: "",
                fullScreenOffset: "",
                disableProgressBar:"on",
                hideThumbsOnMobile:"off",
                hideSliderAtLimit:0,
                hideCaptionAtLimit:0,
                hideAllCaptionAtLilmit:0,
                debugMode:false,
                fallbacks: {
                    simplifyAll:"off",
                    nextSlideOnWindowFocus:"off",
                    disableFocusListener:false,
                }
            });
        }
    }); /*ready*/
</script>

我进行了搜索，但没有找到合适的答案。我知道使用 resize() 函数，但我不知道如何更改脚本中的值。

提前致谢。

Answer 1

现在您已经在 "i" 变量中获得了宽度，您可以在变量 offset 中创建一个像这样的简短 if 语句：

e.fullScreenOffset = i > 1100 ? '0' : '125';

我不知道你是否需要它的末尾有 "px" 或只是数字，我也不知道它是否也应该在 e.fullScreenOffsetContainer 上，无论如何，希望对您有所帮助。

狮子座。

如何根据宽度屏幕更改 Slider Revolution 上的偏移 jquery 选项

How can I change offset jquery option on Slider Revolution depending on width screen

jquery

offset

revolution-slider