Непонятно, что именно вы хотите сделать, но вы можете добавить обратный вызов, чтобы добавить нужный класс.
Если вы не знали, к текущей навигационной ссылке добавлен класс cur. Вы можете просто использовать этот класс, чтобы сделать ваш дополнительный стиль.
Этот код добавит «текущий» класс к <li>
, окружающему ссылку:
$('#slider').anythingSlider({
onSlideComplete : function(slider){
slider.$nav // UL of the navigation list
.find('li').removeClass('current')
.find('.cur').parent().addClass('current');
}
});
так что ваш HTML будет выглядеть примерно так:
<ul class="thumbNav"> <!-- this is the slider.$nav -->
<li class="first">
<a href="#" class="panel1">1</a>
</li>
<li class="current"> <!-- this is the current panel -->
<a href="#" class="panel2 cur">2</a>
</li>
<li>
<a href="#" class="panel3">3</a>
</li>
<li>
<a href="#" class="panel4">4</a>
</li>
<li>
<a href="#" class="panel5">5</a>
</li>
<li class="last">
<a href="#" class="panel6">6</a>
</li>
</ul>
Обновление: хорошо, попробуйте это ... и вот демо
HTML
<div id="background" class="bg1"></div>
Сценарий
$('#slider').anythingSlider({
onSlideComplete: function(slider){
// get text, or you could use index()
var bg = $.trim( slider.$nav.find('.cur').text() );
// replace entire class
$('#background').attr('class', 'bg' + bg);
}
});