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

Я искал высоко и низко для этого. Это единственный сайт, на котором есть люди, использующие эту библиотеку Cycle2 и задающие вопросы, поэтому я надеюсь, что кто-то может помочь мне с тем, что должно быть очень простой задачей. У меня есть страница ASP.NET, которая использует ползунок Cycle2 с div вместо изображений. Я использую собственный пейджер для их примера. Все работает нормально - переход div и ссылки на пронумерованном пейджере загружают соответствующий слайд при нажатии, но числовые ссылки в 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>

person user3158533    schedule 03.01.2014    source источник


Ответы (1)


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

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

Пример JSFiddle

person Bryan    schedule 06.01.2014
comment
Так просто и идеально. Спасибо Брайан! - person user3158533; 07.01.2014