пользовательский пейджер в плагине jquery bxslider - PullRequest
Новая
       10

пользовательский пейджер в плагине jquery bxslider

2 голосов
/ 19 августа 2011

У меня проблема с jQuery, и я не знаю, с чего начать.

В основном я использую плагин bxslider для создания карусели.

Вот упрощенный HTML: 

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>

И jquery: 

$('ul#promos').after('<div id="pager1"></div>');
$('ul#promos').bxSlider({
    displaySlideQty: 1,
    moveSlideQty: 1,
    infiniteLoop: false,
    controls: false, 
    pager: true,
    pagerSelector: '#pager1',
    auto: true,
    pause: 5000,
    speed: 1000
});

Это выводит в виде: 

<ul id="promos">
    <li>
        <h2>Event Title 1</h2>
    </li>
    <li>
        <h2>Event Title 2</h2>
    </li>
</ul>
<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">1</a>
    <a href="" class="pager-link pager-2">2</a>
</div>

Однако я хочу пейджериспользовать относительные заголовки h2, а не возрастающие числа.В идеале это должно выглядеть так: 

<div id="pager1">
    <a href="" class="pager-link pager-1 pager-active">Event Title 1</a>
    <a href="" class="pager-link pager-2">Event Title 2</a>
</div>

Примечание: в этой карусели может быть до шести событий.

Вот пример: http://jsfiddle.net/adrianjacob/gHpBT/3/

Любойуказатели, с чего начать, будет высоко ценится.

Ответы [ 3 ]

1 голос
/ 12 июля 2012

Я только что построил свой собственный пейджер с помощью обратных вызовов bxSlider и открытых методов.

Я использую haml и coffeescript, но вы должны понять.

Я использую атрибут data-id в пользовательских ссылках на пейджер, чтобы связать эту ссылку с конкретным слайдом

HAML 

%ul.landing-links
  %li <a href="#" data-id="0" class="active">Slide One</a>
  %li <a href="#" data-id="1">Slide Two</a>

CoffeeScript 

landing_slides = $("#landing-slides").bxSlider
  controls: false,
  auto: true,
  pause: 10000,
  autoHover: true,
  onAfterSlide: (num, qty, obj) ->
    # Switch the active class to the corresponding pager link
    $("ul.landing-links li a.active").removeClass("active")
    $("ul.landing-links li a[data-id=#{num}]").addClass("active")

$('ul.landing-links li a').click (e) ->
  e.preventDefault()
  landing_slides.goToSlide($(this).data('id')) # Get the data-id attribute value
  landing_slides.startShow() # This is needed to restart the auto scroll
1 голос
/ 16 сентября 2011

Я понял это на примере http://bxslider.com/examples/thumbnail-pager-2

В примере используется buildPager: заменяет стандартный пейджер 1,2,3,4 изображениями, пример: 

$(function(){
  $('#slider1').bxSlider({
    pager: true,
    buildPager: function(slideIndex){
      switch (slideIndex){
        case 0:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet1_thumb.jpg" /></a>';
        case 1:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet2_thumb.jpg" /></a>';
        case 2:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet3_thumb.jpg" /></a>';
        case 3:
          return '<a href=""><img src="/sites/all/themes/bx/images/pic_velvet4_thumb.jpg" /></a>';
      }
    }
  });
});
0 голосов
/ 01 января 2016

Пожалуйста, проверьте приведенный ниже HTML-код для нумерации страниц 

jQuery(document).ready(function(){        
  jQuery('#bxslider1').bxSlider({
    pagerCustom: '#bxsliderlist1'
  });   
});
<ul id="bxslider1">
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
  <li>
    your contant
  </li>
</ul>
<ul id="bxsliderlist1">
  <li>
    <a data-slide-index="0">your contant</a>
  </li>
   <li>
    <a data-slide-index="1">your contant</a>
  </li>
   <li>
    <a data-slide-index="2">your contant</a>
  </li>
   <li>
    <a data-slide-index="3">your contant</a>
  </li>
  
</ul>
...