Question

我正在使用此滑块：http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

您可以在此处查看：http://www.fisherwallace.com/pages/treating-chronic-pain

滑块具有响应性，在大屏幕和小屏幕上看起来很好。但是，941px和1336px之间的屏幕是一个问题。

这是因为滑块设置为以940px开始响应（responsiveUnder：＆＃39; 940＆＃39;） - 网站内容的宽度 - 而不是1336px - 的宽度滑块中的图像。

滑块宽度设置为1336px ...使得940px不可接受，因为它会切断图像的左右边缘。

如果我将滑块设置为以1336px开始响应（responsiveUnder：＆＃39; 1336＆＃39;），则当内容移至移动设备时，滑块很小。

所以我想要做的是根据屏幕尺寸更改滑块设置：

屏幕宽度＆gt; 940：responsiveUnder：＆＃39; 1336＆＃39;

屏幕宽度＆lt; = 940：responsiveUnder：＆＃39; 940＆＃39;

以下是整个当前滑块代码：

 new AlertDialog.Builder(this)
                    .SetMessage("Message!")
                    .SetTitle("Queued")
                    .SetPositiveButton("Ok",
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            // Finish activity
                            finish();
                        }
                    });
                   .Show();

我发现这个函数可以根据屏幕宽度调整css：

<script type="text/javascript">
    $(document).ready(function(){
        $('#layerslider').layerSlider({
          slidedelay: '7000',
          showCircleTimer: false,
          skin: 'v5',
          navPrevNext: true,
          hoverPrevNext: false,
          navStartStop: true,
          navButtons: true,
          thumbnailNavigation: 'disabled',
          autoStart: true,
          autoPlayVideos: false,
          sliderFadeInDuration: '0',
          layersContainer:'940',
          responsive: false,
          responsiveUnder:'940'
        });
    });
</script>

不幸的是，我不确定如何把这两件放在一起。

例如，我可以......

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

帮助和建议赞赏...试图学习！

Answer 1

回答我自己的问题，为其他可能需要帮助的人提供帮助。

在同事的帮助下，我找到了解决方案。

要根据屏幕宽度动态更改jQuery“responsiveUnder”参数，请将像素值替换为...

$(document).ready(function(){

    $('#layerslider').layerSlider({

      slidedelay: '7000',
      showCircleTimer: false,
      skin: 'v5',
      navPrevNext: true,
      hoverPrevNext: false,
      navStartStop: true,
      navButtons: true,
      thumbnailNavigation: 'disabled',
      autoStart: true,
      autoPlayVideos: false,
      sliderFadeInDuration: '0',
      layersContainer:'940',
      responsive: false,
      responsiveUnder:(($(window).width() > 940) ? '1336' : '940')
    });
});

所以完整的jQuery调用是......

{{1}}

根据屏幕宽度调整jquery参数

1 个答案: