2015-10-30 4 views
0

LIVE DEMOДобавить состояние слайд-класс Revolution Slider контейнер

У меня есть статический слой поверх моего 3-х горок revslider. Я хочу что-то изменить в статическом слое, когда ползунок достигает третьего слайда.

В настоящее время слайдер предоставляет класс «.current-sr-slide-visible» для элемента li при его достижении, но таким образом я не могу настроить статический уровень с помощью CSS, поскольку он находится в родительском контейнере. .

Это мой слайдер (упрощенно, только структурные, см выше ссылку на полный код):

<div class="revslider"> 
    <ul class="slides"> 
    ... 
    <li id="slide3">...</li> 
    </ul> 
    <div class="static-layer"> 
    <svg class="logo"></svg> 
    </div> 
</div> 

редактировать: Так что я хочу, чтобы добавить любой «slide3» индикатор на любой элемент, но не элемент li , Это может быть хорошо, если я могу поместить класс индикатора на ul, или контейнер, или сам логотип.

Я попробовал это (это работает в другом месте на странице, но не с помощью ползунка по желанию, не знаю, почему):

$(function(){ 
    if($('#slide3').hasClass('current-sr-slide-visible')) { 
     $('.logo').addClass('white-logo'); 
    } 
}); 

edit2: пытался через revslider апи, но что-то не так с это не работает ... если бы вы могли видеть то, что проблема с этим, это может быть лучшим решением:

jQuery(document).ready(function() { 
    var revapi = jQuery('.revslider').show().revolution(
    { 
    // ...slider settings 
    }); 

// event for when slide is changed 
revapi.on('revolution.slide.onchange', function(e, data) { 

    // slider changed 
    var currentSlideNumber = data.slideindex; 
    $('.revslider').addClass(currentSlideNumber); 
}); 
}); 

Любая помощь будет appriciated.

Slider Версия: * jquery.themepunch.revolution.js - JQuery плагин для Revolution Slider * @version: 4.6.4 (26.11.2014)

+0

попробуйте использовать событие смены слайдов для этого. Также упоминайте версию плагина и дайте ссылку на сайт плагина –

+0

любую доступную демо-версию? –

+0

Не могли бы вы рассказать мне, как? :) добавлена ​​информация о версии – Nimue

ответ

0
<div id="revslider"> 
    <ul class="slides"> 
    ... 
    <li id="slide3">...</li> 
    </ul> 
    <div class="static-layer" class="logo">logo</div> 
</div> 

в ваших JS у вас есть тип (. логотип), что означает, что класс является логотипом вызова. это может быть проблемой. удачи

+0

'class =" static-layer "class =" logo "' действительно? –

+0

Иногда нехорошо видеть код в маленьком окне извините: D –

+0

вы попробовали setAttribute ("class", "white_logo")? –

Смежные вопросы