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事件 非常感谢您的任何帮助，如果我漏掉了重要内容，请见谅。

- mrB

---

你的代码有点混乱。首先，API引用中提到了cbInit，但你使用的是cbStart；其次，你没有在任何时候将layersContainer设置为768（你有50和1030）。 - Matthew Wilcoxson

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的元素，因为我假设您想在同一页上使用多个元素。

- Matthew Wilcoxson

---

还要注意，每次创建 Slider 时获取标题高度非常低效 - 如果您正在创建大量 Slider，则可能希望缓存该值。 - Matthew Wilcoxson