javascript - jQuery LayerSlider动态更改选项

我对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(),
    });
  }

我正在做的是检查抬头何时增加到146px(第一次导航增加时)，所以我知道何时更改“layersContainer”选项并将文本容器放入一点。

LayerSlider v5文​​档的“API”部分包含以下内容:

“cbInit回调将接收滑块DOM元素本身，而所有其他事件都将具有滑块的data对象。该data对象可用于访问所有正在使用的设置，并且可以即时覆盖其中的一些。”

带有以下事件:LayerSlider v5 Events

我们将不胜感激，如有任何重要帮助，我们将不胜感激。

最佳答案

初始化可能覆盖了您编写的代码。解决此问题的最简单方法是在实例化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的元素，因为我假设您希望同一页面上有多个元素。