Автоматическая генерация пегинации для jCarouselLite
HTML before:
<div id="top_slider"> <ul> <li> <div class="text">text1</div> <img src="img1.png" alt="slide"> </li> <li> <div class="text">text2</div> <img src="img2.png" alt="slide"> </li> </ul> </div>
JS:
function add_slider(elem) { var pages = $('<ul/>').addClass('pages'); $("<div/>") .addClass('top_slider_pagination slider_pagination') .append(pages) .insertAfter(elem) ; var slides = elem.find('li'), count = slides.length; window.slider_pages = []; slides.each(function(index) { var li = $('<li/>').addClass('p' + index); if (!index) li.addClass('active'); li.click(function() { li.parent().children().removeClass('active'); li.addClass('active'); }); pages.append(li); window.slider_pages.push('.p' + index) if (!--count) elem.jCarouselLite({ btnGo : window.slider_pages }); }) } var top_slider = $("#top_slider"); if (top_slider.length) { add_slider(top_slider); }
HTML after:
<div id="top_slider"> ... </div> <div class="top_slider_pagination slider_pagination"> <ul class="pages"> <li class="p0 active"></li> <li class="p1"></li> </ul> </div>
Комментарии
Отправить комментарий