Автоматическая генерация пегинации для 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>

Комментарии

Популярные сообщения из этого блога

Google Chrome - видео в отдельном окне

Bitrix: кнопка добавить в корзину

Google chrome размытое изображение