Jquery LayerSlider change options dynamically

Question

I'm still new to jQuery and I'm having a slight issue with LayerSlider. There is an option when calling the plugin that tells it what width the container for the text should be with 'layersContainer : 960'.

What I'm trying to do is have the option set to 960px at almost all times, except for at one break point were I would want it at 768px. Currently my code is as follows:

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

What I'm doing is checking to see when the header increases to 146px (when the nav stacks up for the first time) so I know when to change the 'layersContainer' option and bring the text container in a bit.

The LayerSlider v5 documentation has the following under its API section:

" The cbInit callback will receive the slider DOM element itself, while all of the other events will have the data object of the slider. The data object can be used to have access all of the settings that the working is working with, and it also make possible to override some of them on-the-fly. "

With the following events: LayerSlider v5 Events

Any help would be much appreciated, and I'm sorry if I've left anything important out.

Answer 1

It maybe that the initilisation is overriding the code you've written. This simplest way to solve this is to combine the functions and set the values when you instantiate the 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/'
        });
 }

Use with: layerSlider( "#slider" ) and notice I've also made it possible to pass in the element you are creating the Slider in as I assume you want multiple elements on the same page.