JQuery LayerSlider динамически меняет параметры

Question

Я все еще новичок в jQuery, и у меня небольшая проблема с LayerSlider. Существует опция при вызове плагина, который сообщает ему, какой шириной контейнер для текста должен быть «layerContainer: 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(), 
    }); 
    } 

Что я делаю проверку, чтобы увидеть при увеличении заголовка к 146px (когда нав Стакается в первый раз), так что я знаю, когда изменить «layersContainer» и немного принести текстовый контейнер.

Документация LayerSlider v5 имеет следующие под API раздела:.

"Обратный вызов cbInit получит сам слайдер DOM элемент, в то время как все остальные события будут иметь объект данных слайдера объект данных может быть использован, чтобы иметь доступ ко всем настройкам, что рабочий работает с, а также дают возможность переопределить некоторые из них на лету "

со следующими событиями:. LayerSlider v5 Events

Любая помощь было бы очень признательно, и я сожалею, если я оставил что-нибудь importa nt out.

Answer 1

Возможно, что инициализация отменяет код, который вы написали. Самый простой способ решить эту задачу - объединить функции и установить значения при создании экземпляра ползунка.

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") и обратите внимание, я также сделал возможным передать в элемент, который вы создаете ползунок, как я предполагаю, что вы хотите использовать несколько элементов на той же странице.