jQuery Cycle2 слайдер - цифровой пейджер, как изменить атрибуты активного слайда

Question

Я искал высоко и низко для этого. Это единственный сайт, в котором люди используют эту библиотеку Cycle2 и задают вопросы, поэтому я надеюсь, что кто-то может помочь мне с тем, что должно быть очень простой задачей. У меня есть страница ASP.NET, которая использует слайдер Cycle2 с divs вместо изображений. Я использую пользовательский пейджер по их примеру. Все работает нормально - переход на divs и ссылки на пронумерованный пейджер загружают связанный слайд при нажатии, но числовые ссылки в div пейджера не выделяют и не меняют вообще как переход слайдов - так что вы никогда не знаете, какой номер текущий слайд. Возможно ли, чтобы он менял цвет номера, когда активирован соответствующий слайд? Вот некоторые из разметки на моей странице aspx. Содержимое тега asp: PlaceHolder заполняется кодом, но это не имеет отношения к вопросу и предоставляется только как контекст.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle2.js"></script> 

<div class="cycle-slideshow" 
data-cycle-fx="fade"  
data-cycle-timeout="6000"   
data-cycle-slides="> div" 
data-cycle-pager="#custom-pager" 
data-cycle-pager-template="<a href=#> <u>{{slideNum}}</u> </a>&nbsp;&nbsp;"> 


<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 

</div>  
<div id="custom-pager" style="text-align: right;font-size:12pt"></div> 

Answer 1

Существует класс, который получает назначение на активный элемент пейджера .cycle-pager-active

Так все, что вам нужно сделать, это стиль, класс и вы должны быть установлены, чтобы идти.

JSFiddle Example