Jquery LayerSlider 动态更改选项

Question

我还是 jQuery 新手，我对 LayerSlider 有一点小问题。调用插件时有一个选项，它告诉它文本容器的宽度应该是'layersContainer：960'。

我想要做的是几乎所有时间都将选项设置为 960 像素，除非在某个断点处我希望它设置为 768 像素。目前我的代码如下：

function rContainer() {
    if ($("header").height() == 146) {
        $(this).data('layersContainer', '50');
    }
    else {
        $(this).data('layersContainer', '1030');
    }
}

  function layerSlider() {
    $('#slider').layerSlider({
      layersContainer     : 960,   
      responsive          : false,
      responsiveUnder     : 0,    
      navButtons          : true,
      touchNav            : true,   
      keybNav             : true,  
      thumbnailNavigation : 'disabled',
      skin                : 'fullwidth',
      skinsPath           : 'layerslider/skins/',
    cbStart : rContainer(),
    });
  }

我正在做的是检查标题何时增加到 146 像素（当导航第一次堆叠时），所以我知道何时更改“layersContainer”选项并将文本容器带入一点。

LayerSlider v5 文档的 API 部分包含以下内容：

" cbInit 回调将接收滑块 DOM 元素本身，而所有其他事件将具有滑块的数据对象。数据对象可用于访问工作正在使用的所有设置，并且它还可以即时覆盖其中的一些。"

有以下事件：LayerSlider v5 Events

任何帮助将不胜感激，如果我遗漏了任何重要内容，我深表歉意。

Answer 1

可能初始化覆盖了您编写的代码。解决这个问题的最简单方法是在实例化 Slider 时组合函数并设置值。

function layerSlider( element ) {
    var layersContainer = 960;
    if( $("header").height() == 146 ) {
         layersContainer = 768;
    }

    $(element).layerSlider( {
          layersContainer     : layersContainer,   
          responsive          : false,
          responsiveUnder     : 0,    
          navButtons          : true,
          touchNav            : true,   
          keybNav             : true,  
          thumbnailNavigation : 'disabled',
          skin                : 'fullwidth',
          skinsPath           : 'layerslider/skins/'
        });
 }

与：layerSlider( "#slider" ) 一起使用，请注意，我还可以传入您正在创建 Slider 的元素，因为我假设您希望在同一页面上有多个元素。