javascript - Jquery LayerSlider 动态更改选项

Question

我还是 jQuery 的新手，我在使用 LayerSlider 时遇到了一个小问题。调用插件时有一个选项，告诉它文本容器的宽度应为“layersContainer:960”。

我想做的是几乎所有时间都将选项设置为 960px，除了在一个断点处我希望它设置为 768px。目前我的代码如下:

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 回调将接收 slider DOM 元素本身，而所有其他事件都将具有 slider 的数据对象。数据对象可用于访问正在使用的所有设置，并且它还可以即时覆盖其中的一些。”

具有以下事件: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 的元素，因为我假设您需要多个元素页面。