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

我正在做的是检查标头何时增加到146px（当导航器第一次堆叠时），所以我知道何时更改'layersContainer'选项并将文本容器放入一点。 / p>

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的元素，因为我假设你想要在同一页面上有多个元素。

Jquery LayerSlider动态更改选项

1 个答案: