как мы можем использовать пейджер SlidesJS для цикла JQuery - PullRequest
Новая
       24

как мы можем использовать пейджер SlidesJS для цикла JQuery

2 голосов
/ 20 марта 2012

Я пытался спроектировать систему пейджера для моего цикла JQuery. К счастью, я получил это из цикла JQuery: http://www.malsup.com/jquery/cycle/div.html

Теперь я хотел бы иметь систему пейджера, которая выглядит как http://slidesjs.com/

Могу ли я добавить систему SlideJS Pager в цикл JQuery ?? Если да, то как?

1 Ответ

0 голосов
/ 29 мая 2012

Вероятно, было бы трудно "интегрировать" плагины, однако вы можете легко создать якоря страницы с помощью css, который показывает маленькие кружки (или использовать спрайт, как slidejs) и почти идентичен.

У меня естьсоздал демо-версию:

http://jsfiddle.net/lucuma/Mf7Rv/2/

Сначала настройте контейнер для всего пакета. 

<div id="sliders">
   <div id="slideshow">
      <!-- your slides go here whether divs or imgs -->
   </div>
   <div id="pager">
      <!-- this gets dynamically generated by the plugin's paginate that we'll return a's -->
   </div>
   <div id="controller">
     <a href="#" class="prev">&lt;</a>  <!-- these could be images as well -->
     <a href="#" class="next">&gt;</a>
   </div>
</div>

Следующий стиль пейджера и prev / next с чем-то вроде этого: 

#pager {display:inline-block;float:right}
#pager a {background:#FFF;border:2px solid #333;display:inline-block;
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:10px; height:10px; margin-left:2px;
}
#pager a.activeSlide {background-color:#333333;border-color:#333333}
#pager a:hover{background-color:#97201c;border-color:#97201c}
#controller a {text-decoration:none;color:#333333}
#controller a.hover {text-decoration:none;color:#97201c}

И, наконец, загрузите цикл jquery: 

function paginate(idx, slide) {
  return "<a href='#'></a>"   ;
}
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager',
                  pagerAnchorBuilder: paginate,
                   prev: $('.prev'),
                   next: $('.next')
                  });​
...